onMouseOver- DIV background image change but with restriction: No javascript “tag”, no Style css?

Question

<div id="test" name="myDIV" style="background-image: url('img/img3'); width: 280px;    height: 150px " >

</div>
<br><br>
<hr>
<img alt="" id="1" src="img/image1"  onmouseover="javascript:    document.getElementById('test').style.backgroundImage=url('img/img1')">
<img alt="" id="2" src="img/image2"  onmouseover="javascript: document.getElementById('test').style.backgroundImage=url('img/img2)">

something like that, no outside clear function changeBgImage() is allowed. No outside CSS is allowed. I know this company is very retro ~ ^^

Any help? currently, this shows the error. Sorry for no suffix for the image because of stackoverflow is thinking that I am posting the image without privilege. image1.jpg, image2.jpg, image3.jpg were supposed to be written but omitted out otherwise it cannot be posted. Sorry ~

Answer 1

url() is not a JavaScript function. It's actually part of the CSS value you want to set, so you'll probably have to do some evil double quoting, like this:

/* ... */ .style.backgroundImage = 'url(\'img/img1\')';

PS. you're also missing a single quote at the end of the first onmouseover handler.

Answer 2

<img alt="" id="1" src="img/image1" onmouseover="javascript: document.getElementById('test').style.backgroundImage='url(\'img/img1\')';">
<img alt="" id="2" src="img/image2" onmouseover="javascript: document.getElementById('test').style.backgroundImage='url(\'img/img2\')';">

Answer 3

document.getElementById('test').style.backgroundImage = "url('img/img2)'"

Use that instead of your current inline JavaScript, and it should work. If you think about how the CSS would look:

#test { background-image: url('img/img3'); }

Then it's clear that url is part of the value of the CSS property, and therefore needs to be quoted.