CODEWITHSUNDEEP
javascriptdom-events
user829777
user829777

Reputation: 21

onMouseOver- DIV background image change but with restriction: No JavaScript "tag", no Style CSS?

<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.jpg"  onmouseover="javascript:    document.getElementById('test').style.backgroundImage=url('img/img1')">
<img alt="" id="2" src="img/image2.jpg"  onmouseover="javascript: document.getElementById('test').style.backgroundImage=url('img/img2)">

Something like that, no outside clear <javascript> function changeBgImage() </javascript> is allowed. No outside CSS is allowed. I know this company is very retro ~ ^^

Any help? currently, this shows the error.

Upvotes: 0

Views: 6983

Answers (3)

Jan Kr&#252;ger
Jan Kr&#252;ger

Reputation: 18530

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.

Upvotes: 2

Sascha Galley
Sascha Galley

Reputation: 16091

<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\')';">

Upvotes: 0

James Allardice
James Allardice

Reputation: 166031

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.

Upvotes: 0

Related Questions