change div bg-image onclick

[jasinner]

I'm trying to find a way to change the background-image of a div when certain elements are clicked. Here is what I have but it isn't working:

...
#bgimage {
position:absolute;
background-image: url(1.jpg);
top:10px;
left: 220px;
width: 767px;
height: 549px;
}
...

<img src="1thumb.jpg" style="position:absolute;left:10px;top:10px;" onclick="bgimage.style.background-image:url(1.jpg);" />
<img src="2thumb.jpg" style="position:absolute;left:10px;top:213px;" onclick="bgimage.style.background-image:url(2.jpg);" />
<img src="3thumb.jpg" style="position:absolute;left:10px;top:416px;" onclick="bgimage.style.background-image:url(3.jpg);" />

<div id="bgimage">
</div>

 

[trollacious]

Your code has a minus sign in it, which Javascript will choke on, among other things:

onclick = "bgimage.style.background[red]-[/red]image:url"(1.jpg);"

Try this

onclick = "document.getElementById('bgimage').style.backgroundImage='1.jpg';"

Lee

 

[BillyRayPreachersSon]

I think you might need the "url()" portion, too (from memory, so could be wrong):

onclick = "document.getElementById('bgimage').style.backgroundImage = 'url(1.jpg)';"

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jasinner]

that did it guys, thanks!

 

[trollacious]

Good catch, BRPS. #

Lee