Menu
So I’m basically trying to get 2 Javascript codes to work together. In this example, I can get the images to change when the selection is changed in the drop down menu (live example here: [url]http://modernash.com/t_image_change3.html
[CODE]<!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 http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<script type=”text/javascript”>
// preload images
var imgred = new Image().src = “image_change/jht.gif”
var imgblue = new Image().src = “image_change/jsht.gif”
var imggreen = new Image().src = “image_change/pht.gif”
function setImage(imageSelect) {
theImageIndex = imageSelect.options[imageSelect.selectedIndex].id;
if (document.images)
document.getElementById(“bob”).src = eval(“img” + theImageIndex);
}
</script>
</head>
<body>
<form name=”theForm” method=”post” action=”post.html”>
<table>
<tr>
<td>Images:</td>
<td>
<select name=”items” onChange=”setImage(this)”>
<option value=”0″>Please Select</option>
<option value=”1″ id=”red”>Java How-to</option>
<option value=”2″ id=”blue”>Javascript How-to</option>
<option value=”3″ id=”green”>Powerbuilder How-to</option>
</select>
</td>
<td><a id=”todd” href=”image_change/jht.gif”><img id=”bob” src=”image_change/jsht.gif” height=100 width=200/></a></td>
</table>
</form>
</body>
</html>
In this example, I can get get the linked image to change when a selection is made from the drop down menu. For example, if I choose “Javascript How-to” from the drop down menu, I can get it to link to the appropriate image (live example here: [url]http://modernash.com/t_href_change3.html
[CODE]<!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 http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<script type=”text/javascript”>
// preload images
var imgred = new Image().href = “image_change/jht.gif”
var imgblue = new Image().href = “image_change/jsht.gif”
var imggreen = new Image().href = “image_change/pht.gif”
function setImage(imageSelect) {
theImageIndex = imageSelect.options[imageSelect.selectedIndex].id;
if (document.images)
document.getElementById(“todd”).href = eval(“img” + theImageIndex);
}
</script>
</head>
<body>
<form name=”theForm” method=”post” action=”post.html”>
<table>
<tr>
<td>Images:</td>
<td>
<select name=”items” onChange=”setImage(this)”>
<option value=”0″>Please Select</option>
<option value=”1″ id=”red”>Java How-to</option>
<option value=”2″ id=”blue”>Javascript How-to</option>
<option value=”3″ id=”green”>Powerbuilder How-to</option>
</select>
</td>
<td><a id=”todd” href=”image_change/jht.gif”><img id=”bob” src=”image_change/jsht.gif” height=100 width=200/></a></td>
</table>
</form>
</body>
</html>
The problem I’m having is getting both to work together. I tried to change the code in the head to allow for both to work at the same time (image change when the selection is chosen and the link to the appropriate image to change as well):
[CODE]// preload images
var imgred = new Image().src = “image_change/jht.gif”
var imgblue = new Image().src = “image_change/jsht.gif”
var imggreen = new Image().src = “image_change/pht.gif”
function setImage(imageSelect) {
theImageIndex = imageSelect.options[imageSelect.selectedIndex].id;
if (document.images)
document.getElementById(“bob”).src = eval(“img” + theImageIndex);
}
});
function setImage(imageSelect) {
theImageIndex = imageSelect.options[imageSelect.selectedIndex].id;
if (document.images)
document.getElementById(“todd”).href = eval(“img” + theImageIndex);
}
});
});
I hope someone has some pointers b/c I’m really horrible at JS and I’m a bit lost on this one.
Thanks!