Menu
I have thumbnails on a page. When a user hovers over a thumbnail, a larger image on the same page changes (it is just a larger version of the thumbnail). That is my intent anyway, but right now, when I hover over any thumbnail, the thumbnail changes to a blank image (image not found) and the the large image changes to a blank image also. I do not get any errors so it is hard to debug. I am sure it is simple. Here is the code and below that are the html tags that handle the mouseovers. Thank you.
[CODE]
<script language=”javascript”>
if (document.images) {
var img1on = new Image();
img1on.src = “1br_thumb01.png”;
var img2on = new Image();
img2on.src = “1br_thumb02.png”;
var img3on = new Image();
img3on.src = “1br_thumb03.png”;
var img4on = new Image();
img4on.src = “2br_thumb01.png”;
var img5on = new Image();
img5on.src = “2br_thumb02.png”;
var img6on = new Image();
img6on.src = “2br_thumb03.png”;
var img7on = new Image();
img7on.src = “2br_204thumb01.png”;
var img8on = new Image();
img8on.src = “2br_204thumb02.png”;
var img1off = new Image();
img1off.src = “1br_thumb01.png”;
var img2off = new Image();
img2off.src = “1br_thumb02.png”;
var img3off = new Image();
img3off.src = “1br_thumb03.png”;
var img4off = new Image();
img4off.src = “2br_thumb01.png”;
var img5off = new Image();
img5off.src = “2br_thumb02.png”;
var img6off = new Image();
img6off.src = “2br_thumb03.png”;
var img7off = new Image();
img7off.src = “2br_204thumb01.png”;
var img8off = new Image();
img8off.src = “2br_204thumb02.png”;
var img1banner = new Image();
img1banner.src = “1br_01.png”;
var img2banner = new Image();
img2banner.src = “1br_02.png”;
var img3banner = new Image();
img3banner.src = “1br_03.png”;
var img4banner = new Image();
img4banner.src = “2br_01.png”;
var img5banner = new Image();
img5banner.src = “2br_02.png”;
var img6banner = new Image();
img6banner.src = “2br_03.png”;
var img7banner = new Image();
img7banner.src = “2br_204_02.png”;
var img8banner = new Image();
img8banner.src = “2br_204_02.png”;
}
function imgOn(imgName) {
if (document.images) {
document.images[imgName].src = eval(imgName + “on.src”);
document.banner.src = eval(imgName + “banner.src”);
}
}
function imgOff(imgName) {
if (document.images) {
document.images[imgName].src = eval(imgName + “off.src”);
document.banner.src = “1br_01.png”;
}
}
</script>
<a href=”” onmouseover=”imgOn(‘img1’);” onmouseout=”imgOff(‘img1’);”><img name=”img1″ border=”0″ src=”4931/1007/images/1br_thumb01.png” width=”100″ height=”75″></a>
<img name=”banner” border=”0″ src=”4931/1007/images/1br_01.png” width=”601″ height=”450″>