...

View Full Version : Change Background Image with Dropdown IE



theflyingminstr
06-29-2009, 09:21 PM
Hi this code works fine in Fireox but not in IE.

Any help would be greatly appreciated.

Thanks.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript">
function changebg(my)
{
document.getElementById("changeimg").style.backgroundImage ='url('+ my.id +')';
}
</script>

</head>

<body>

<div style="position:absolute; left:620px; top:120px; font-family:Arial; font-size:11pt;">
Select Curtains:
<select>
<option id="images/blue.jpg" onclick="changebg(this)">Blue</option>
<option id="images/red.jpg" onclick="changebg(this)">Red</option>
</select>

</div>

<div id="changeimg" style="border: 1px solid black;width:594px;height:530px;background-image:url(images/empty_room.jpg);background-repeat:no-repeat;">

</div>


</body>

</html>

rdspoons
06-29-2009, 09:39 PM
Here's your code with minor changes.
I've removed the onclick event in the options elements and added an onchange event to the select element.
I also changed the "my" proprty used in "function changebg" from id to value.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript">
function changebg(my)
{

document.getElementById("changeimg").style.backgroundImage ='url("'+ my.value +'")';
}
</script>

</head>

<body>

<div style="position:absolute; left:620px; top:120px; font-family:Arial; font-size:11pt;">
Select Curtains:
<select onchange="changebg(this)">
<option value="images/blue.jpg">Blue</option>
<option value="images/red.jpg">Red</option>
</select>

</div>

<div id="changeimg" style="border: 1px solid black;width:594px;height:530px;background-image:url(images/empty_room.jpg);background-repeat:no-repeat;">

</div>


tested in ie7 and ff3

theflyingminstr
06-29-2009, 09:40 PM
Sweet. Thanks so much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum