PDA

View Full Version : Javascript Image Rollover Help Needed.


[~eVoL-ST~]
June 26th, 2001, 12:55
Hey Everyone,
The image RollOver script on my page doesn't seem to be working properly. I'm not getting an error or anything, but the images aren't changing around, they are just staying the same.
Here is the code. If you know whats wrong please tell me.

/// Code part of the Code :)

<script language="Javascript">

if (document.images) {

button1 = new Image
button2 = new Image

button1.src = 'images/header.jpg'
button2.src = 'images/header-home.jpg'

button3 = new Image
button4 = new Image

button3.src = 'images/header.jpg'
button4.src = 'images/header-writings.jpg'

button5 = new Image
button6 = new Image

button5.src = 'images/header.jpg'
button6.src = 'images/header-portfolio.jpg'

button7 = new Image
button8 = new Image

button7.src = 'images/header.jpg'
button8.src = 'images/header-art.jpg'

button9 = new Image
button10 = new Image

button9.src = 'images/header.jpg'
button10.src = 'images/header-links.jpg'

button11 = new Image
button12 = new Image

button11.src = 'images/header.jpg'
button12.src = 'images/header-contact.jpg'

button13 = new Image
button14 = new Image

button13.src = 'images/header.jpg'
button14.src = 'images/header-guestbook.jpg'
}

</script>

/// Links Part of the Code

<MAP NAME="header">
<AREA ID="home" SHAPE="RECT" HREF="main.html" TARGET="_self" ALT="home" COORDS="0,0, 98,98" onMouseOver="document.images.src=button2.src" onMouseOut="document.images.src=button1.src">
<AREA ID="guestbook" SHAPE="RECT" HREF="http://htmlgear.lycos.com/guest/control.guest?u=s0ultr4nc3&i=1&a=view" TARGET="_self" ALT="guestbook" COORDS="200,69, 233,98" onMouseOver="document.images.src=button4.src" onMouseOut="document.images.src=button3.src">
<AREA ID="contact" SHAPE="RECT" HREF="contact.html" TARGET="_self" ALT="contact" COORDS="151,69, 185,99" onMouseOver="document.images.src=button6.src" onMouseOut="document.images.src=button5.src">
<AREA ID="links" SHAPE="RECT" HREF="links.html" TARGET="_self" ALT="links" COORDS="104,68, 137,98" onMouseOver="document.images.src=button8.src" onMouseOut="document.images.src=button7.src">
<AREA ID="art" SHAPE="RECT" HREF="art.html" TARGET="_self" ALT="art" COORDS="200,35, 233,65" onMouseOver="document.images.src=button10.src" onMouseOut="document.images.src=button9.src">
<AREA ID="portfolio" SHAPE="RECT" HREF="portfolio.html" TARGET="_self" ALT="portfolio" COORDS="151,34, 185,64" onMouseOver="document.images.src=button12.src" onMouseOut="document.images.src=button11.src">
<AREA ID="writings" SHAPE="RECT" HREF="writings.html" ALT="writings" COORDS="104,35, 136,64" onMouseOver="document.images.src=button14.src" onMouseOut="document.images.src=button13.src">
</MAP>
lord_andy
July 2nd, 2001, 17:09
Sorry but I can't help but I will post the code that is on my site which does work. jokemachine in the signature.:)
You might find it useful to compare.

If you want some help try this site:http://www.pagetutor.com/buttons/

<SCRIPT LANGUAGE="JavaScript"><!--
// preload images:
if (document.images) {
clickme1 = new Image(150,20); clickme1.src = "images/blondeoff.gif";
clickme2 = new Image(150,20); clickme2.src = "images/blondeover.gif";
clickme3 = new Image(150,20); clickme3.src = "images/animaloff.gif";
clickme4 = new Image(150,20); clickme4.src = "images/animalover.gif";
clickme5 = new Image(150,20); clickme5.src = "images/irishoff.gif";
clickme6 = new Image(150,20); clickme6.src = "images/irishover.gif";
clickme7 = new Image(150,20); clickme7.src = "images/baroff.gif";
clickme8 = new Image(150,20); clickme8.src = "images/barover.gif";
clickme9 = new Image(150,20); clickme9.src = "images/doctoroff.gif";
clickme10 = new Image(150,20); clickme10.src = "images/doctorover.gif";
clickme11 = new Image(150,20); clickme11.src = "images/lawyeroff.gif";
clickme12 = new Image(150,20); clickme12.src = "images/lawyerover.gif";
clickme13 = new Image(150,20); clickme13.src = "images/religiousoff.gif";
clickme14 = new Image(150,20); clickme14.src = "images/religiousover.gif";
clickme15 = new Image(150,20); clickme15.src = "images/machooff.gif";
clickme16 = new Image(150,20); clickme16.src = "images/machoover.gif";
clickme17 = new Image(150,20); clickme17.src = "images/feministoff.gif";
clickme18 = new Image(150,20); clickme18.src = "images/feministover.gif";
clickme19 = new Image(150,20); clickme19.src = "images/miscoff.gif";
clickme20 = new Image(150,20); clickme20.src = "images/miscover.gif";
clickme21 = new Image(150,20); clickme21.src = "images/emailme.gif";
clickme22 = new Image(150,20); clickme22.src = "images/emailmeover.gif";
clickme23 = new Image(150,20); clickme23.src = "images/guestoff.gif";
clickme24 = new Image(150,20); clickme24.src = "images/guestover.gif";
clickme25 = new Image(150,20); clickme25.src = "images/dirtyoff.gif";
clickme26 = new Image(150,20); clickme26.src = "images/dirtyover.gif";
clickme27 = new Image(150,20); clickme27.src = "images/mainoff.gif";
clickme28 = new Image(150,20); clickme28.src = "images/mainover.gif";
}

function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>

<tr height="18" width="100%"><td><A HREF="index.html" onMouseOver="hiLite('img14','clickme28')" onMouseOut="hiLite('img14','clickme27')"><IMG SRC="images/mainoff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Main page - Joke of the week." NAME="img14"></a></td></tr>
<tr height="18" width="100%"><td><A HREF="blonde1.html" onMouseOver="hiLite('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG SRC="images/blondeoff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Blonde jokes" NAME="img01"></a></td></tr>
<tr width="100%" height="18"><td><A HREF="dirty.html" onMouseOver="hiLite('img13','clickme26')" onMouseOut="hiLite('img13','clickme25')"><IMG SRC="images/dirtyoff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Dirty jokes" NAME="img13"></a></td></tr>
<tr width="100%" height="18"><td><A HREF="animals.html" onMouseOver="hiLite('img02','clickme4')" onMouseOut="hiLite('img02','clickme3')"><IMG SRC="images/animaloff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Animal jokes" NAME="img02"></a></td></tr>
<tr width="100%" height="18"><td><A HREF="irish1.html" onMouseOver="hiLite('img03','clickme6')" onMouseOut="hiLite('img03','clickme5')"><IMG SRC="images/irishoff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Irish jokes" NAME="img03"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="bar.html" onMouseOver="hiLite('img04','clickme8')" onMouseOut="hiLite('img04','clickme7')"><IMG SRC="images/baroff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Bar jokes" NAME="img04"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="doctor.html" onMouseOver="hiLite('img05','clickme10')"onMouseOut="hiLite('img05','clickme9')"><IMG SRC="images/doctoroff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Doctor jokes" NAME="img05"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="lawyer.html" onMouseOver="hiLite('img06','clickme12')" onMouseOut="hiLite('img06','clickme11')"><IMG SRC="images/lawyeroff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Lawyer jokes" NAME="img06"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="religion.html" onMouseOver="hiLite('img07','clickme14')" onMouseOut="hiLite('img07','clickme13')"><IMG SRC="images/religiousoff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Religious jokes" NAME="img07"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="macho.html" onMouseOver="hiLite('img08','clickme16')" onMouseOut="hiLite('img08','clickme15')"><IMG SRC="images/machooff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Macho jokes" NAME="img08"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="feminist.html" onMouseOver="hiLite('img09','clickme18')" onMouseOut="hiLite('img09','clickme17')"><IMG SRC="images/feministoff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Feminist jokes" NAME="img09"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="misc.html" onMouseOver="hiLite('img10','clickme20')" onMouseOut="hiLite('img10','clickme19')"><IMG SRC="images/miscoff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Miscellaneous jokes" NAME="img10"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="http://pub.alxnet.com/guestbook?id=2105097" target="_blank" onMouseOver="hiLite('img12','clickme24')" onMouseOut="hiLite('img12','clickme23')"><IMG SRC="images/guestoff.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="Please sign my guestbook!" NAME="img12"></a></td></tr>
<tr width="100%" height="18" ><td><A HREF="a_submit.html" onMouseOver="hiLite('img11','clickme22')"onMouseOut="hiLite('img11','clickme21')"><IMG SRC="images/emailme.gif" WIDTH="150" HEIGHT="20" BORDER="0" ALT="E-mail me" NAME="img11"></a></td></tr>