View Full Version : Image roll-over


fruitcake
06-26-2003, 08:59 PM
I used the same code for my splash page, and it worked. But on my layout page, the rollovers don't work. I must've missed something, but I'm pretty much copy/paste only with JavaScript, and I can't see what's wrong.


<html>
<head>

<script language="JavaScript">
<!-- Hide the script from old browsers --

img1_on = new Image(92,125);
img1_on.src="2x5-hov.jpg";
img1_off = new Image(92,125);
img1_off.src="2x5.jpg";

img2_on = new Image(92,125);
img2_on.src="1x4-hov.jpg";
img2_off = new Image(92,125);
img2_off.src="1x4.jpg";

img3_on = new Image(92,125);
img3_on.src="1x3-hov.jpg";
img3_off = new Image(92,125);
img3_off.src="1x3.jpg";

img4_on = new Image(92,125);
img4_on.src="2x2hov.jpg";
img4_off = new Image(92,125);
img4_off.src="2x2.jpg";

img5_on = new Image(92,125);
img5_on.src="2x4-hov.jpg";
img5_off = new Image(92,125);
img5_off.src="2x4.jpg";

function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->
</script>


</head>
<body background="0-0.jpg">


<table border="0" bordercolor="#000000" style="position: absolute; bottom: 10px; left: 100px" cellpadding="0" cellspacing="0">
<tr>
<td><img src="1x1.jpg"></td>
<td><img src="1x2.jpg"></td>
<td><a href="index.html" target="main" onmouseover="over_image('img3');" onmouseout="off_image('img3')"><img src="1x3.jpg" border="0" "name="img3"></a></td>
<td><a href="index.html" target="main" onmouseover="over_image('img2');" onmouseout="off_image('img2')"><img src="1x4.jpg" border="0" "name="img2"></a></td>
<td><img src="1x5.jpg"></td>
<td><img src="1x6.jpg"></td>
</tr>
<tr>
<td><img src="2x1.jpg"></td>
<td><a href="index.html" target="main" onmouseover="over_image('img4');" onmouseout="off_image('img4')"><img src="2x2.jpg" border="0" "name="img4"></a></td>
<td><img src="2x3.jpg"></td>
<td><a href="index.html" target="main" onmouseover="over_image('img5');" onmouseout="off_image('img5')"><img src="2x4.jpg" border="0" "name="img5"></a></td>
<td><a href="index.html" target="main" onmouseover="over_image('img1');" onmouseout="off_image('img1')"><img src="2x5.jpg" border="0" "name="img1"></a></td>
<td><img src="2x6.jpg"></td>
</tr>
<tr>
<td><img src="3x1.jpg"></td>
<td colspan="2"><img src="3x2.jpg"></td>
<td colspan="2"><img src="3x3.jpg"></td>
<td><img src="3x4.jpg"></td>
</tr>
<tr>
<td><img src="4x1.jpg"></td>
<td colspan="2"><img src="4x2.jpg"></td>
<td colspan="2"><img src="4x3.jpg"></td>
<td><img src="4x4.jpg"></td>
</tr>
</table>

</body>
</html>

MaGiCSuN
06-26-2003, 10:04 PM
try this code instead:

<html>
<head>

<script language="JavaScript">
<!-- Hide the script from old browsers --

img1_on = new Image(92,125);
img1_on.src="2x5-hov.jpg";
img1_off = new Image(92,125);
img1_off.src="2x5.jpg";

img2_on = new Image(92,125);
img2_on.src="1x4-hov.jpg";
img2_off = new Image(92,125);
img2_off.src="1x4.jpg";

img3_on = new Image(92,125);
img3_on.src="1x3-hov.jpg";
img3_off = new Image(92,125);
img3_off.src="1x3.jpg";

img4_on = new Image(92,125);
img4_on.src="2x2hov.jpg";
img4_off = new Image(92,125);
img4_off.src="2x2.jpg";

img5_on = new Image(92,125);
img5_on.src="2x4-hov.jpg";
img5_off = new Image(92,125);
img5_off.src="2x4.jpg";

function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->
</script>


</head>
<body background="0-0.jpg">


<table border="0" bordercolor="#000000" style="position: absolute; bottom: 10px; left: 100px" cellpadding="0" cellspacing="0">
<tr>
<td><img src="1x1.jpg"></td>
<td><img src="1x2.jpg"></td>
<td><a href="index.html" target="main" onmouseover="over_image('img3');" onmouseout="off_image('img3')"><img src="1x3.jpg" border="0" name="img3"></a></td>
<td><a href="index.html" target="main" onmouseover="over_image('img2');" onmouseout="off_image('img2')"><img src="1x4.jpg" border="0" name="img2"></a></td>
<td><img src="1x5.jpg"></td>
<td><img src="1x6.jpg"></td>
</tr>
<tr>
<td><img src="2x1.jpg"></td>
<td><a href="index.html" target="main" onmouseover="over_image('img4');" onmouseout="off_image('img4')"><img src="2x2.jpg" border="0" name="img4"></a></td>
<td><img src="2x3.jpg"></td>
<td><a href="index.html" target="main" onmouseover="over_image('img5');" onmouseout="off_image('img5')"><img src="2x4.jpg" border="0" name="img5"></a></td>
<td><a href="index.html" target="main" onmouseover="over_image('img1');" onmouseout="off_image('img1')"><img src="2x5.jpg" border="0" name="img1"></a></td>
<td><img src="2x6.jpg"></td>
</tr>
<tr>
<td><img src="3x1.jpg"></td>
<td colspan="2"><img src="3x2.jpg"></td>
<td colspan="2"><img src="3x3.jpg"></td>
<td><img src="3x4.jpg"></td>
</tr>
<tr>
<td><img src="4x1.jpg"></td>
<td colspan="2"><img src="4x2.jpg"></td>
<td colspan="2"><img src="4x3.jpg"></td>
<td><img src="4x4.jpg"></td>
</tr>
</table>

</body>
</html>

you had an couple of extra " in the code. So i hope this works

Love,
Mirna

fruitcake
06-27-2003, 04:38 AM
Thanks! Works now =D