Image Rollovers

[DDock3287]

Well, I just started venturing into JavaScript. Now that I'm halfway through the book [JavaScript Bible 5th Ed.] I decided to try to do some stuff. But like always - my scripts are not working. Here is the code in my rollover.js file

Code: Select all

// JavaScript Document

//Precache of "Off" Button Images
var offImgArray = new Array();
offImgArray["addon"] = new Image(100,30);
offImgArray["calendar"] = new Image(100,30);
offImgArray["forums"] = new Image(100,30);
offImgArray["gallery"] = new Image(100,30);
offImgArray["home"] = new Image(100,30);
offImgArray["photos"] = new Image(100,30);
offImgArray["tslogin"] = new Image(100,30);
offImgArray["updates"] = new Image(100,30);

//Off Image Array
offImgArray["addon"].src = "http://www.webforumz.com/images/linkies/1addons.jpg";
offImgArray["calendar"].src = "http://www.webforumz.com/images/linkies/1calendar.jpg";
offImgArray["forums"].src = "http://www.webforumz.com/images/linkies/1forums.jpg";
offImgArray["gallery"].src = "http://www.webforumz.com/images/linkies/1gallery.jpg";
offImgArray["home"].src = "http://www.webforumz.com/images/linkies/1home.jpg";
offImgArray["photos"].src = "http://www.webforumz.com/images/linkies/1photos.jpg";
offImgArray["tslogin"].src = "http://www.webforumz.com/images/linkies/1tslogin.jpg";
offImgArray["updates"].src = "http://www.webforumz.com/images/linkies/1update.jpg";

//Precache of "On" Button Images
var onImgArray = new Array();
onImgArray["addon"] = new Image(100,30);
onImgArray["calendar"] = new Image(100,30);
onImgArray["forums"] = new Image(100,30);
onImgArray["gallery"] = new Image(100,30);
onImgArray["home"] = new Image(100,30);
onImgArray["photos"] = new Image(100,30);
onImgArray["tslogin"] = new Image(100,30);
onImgArray["updates"] = new Image(100,30);

//On Image Array
onImgArray["addon"].src = "http://www.webforumz.com/images/linkies/addonsparkle.gif";
onImgArray["calendar"].src = "http://www.webforumz.com/images/linkies/calendarsparkle.gif";
onImgArray["forums"].src = "http://www.webforumz.com/images/linkies/forumsparkle.gif";
onImgArray["gallery"].src = "http://www.webforumz.com/images/linkies/gallerysparkle.gif";
onImgArray["home"].src = "http://www.webforumz.com/images/linkies/homesparkle.gif";
onImgArray["photos"].src = "http://www.webforumz.com/images/linkies/photosparkle.gif";
onImgArray["tslogin"].src = "http://www.webforumz.com/images/linkies/tsloginsparkle.gif";
onImgArray["updates"].src = "http://www.webforumz.com/images/linkies/updatesparkle.gif";


//Swap Functions
function imageOn(imgName)
{
    if (document.images)
    {document.images[imgName].src = onImgArray[imgName].src;}
}
function imageOff(imgName)
{
    if (document.images)
    {document.images[imgName].src = offImgArray[imgName].src;}
}

In my header I have this call for the rollover.js file.

Code: Select all

<script type="text/javascript" src="rollover.js"></script>

And this is how I have my image on my page linked as...

Code: Select all

<a href="index.html" onmouseover="imageOn('home')" onmouseout="imageOff('home')">
        <img border="0" src="http://www.webforumz.com/images/linkies/1home.jpg" alt="Home" /></a>

Anyone see any problems? It is basically out of the book as they show it, but I have placed the preloading code into an external document, as this will be used for all my links.

Thanks, DDock

[Rob]

Going by your description above, shouldnt the include of the javascript read:-

Code: Select all

<script type="text/javascript" src="rollover.js"></script>

[Rob]

... I presume the file is referenced properly but you mentioned rollover.js as the filename.

Try changing the image alt text to all lower case.... javascript is CaSe SeNsItIvE

[karinne]

Hmmm ... I would use CSS for this

Pure CSS rollovers without Javascript

[AndrewFelix]

Have to agree that CSS would be best. The best rollover technique in my opinion is this:

http://www.alistapart.com/articles/slidingdoors2/

[karinne]

^ which basically originated from this

Fast Rollovers Without Preload

[DDock3287]

Originally Posted by Rob

Going by your description above, shouldn't the include of the javascript read:-

Code: Select all

<script type="text/javascript" src="rollover.js"></script>

Yes, I did end up changing that, but not in my code script I placed here. Ill look into the css image rollovers - I'd honestly want to do that anyways. CSS is something I know a bit better. Thanks

Ok I looked at the CSS Rollover Images. Would it be easy to put an animated GIF as the secondary. It would seem I would have to have both as an animated GIF for it to work. Wouldn't that end up making the file size a bit larger?

Essentially the rollover image will be the same as the first one, but the "shield" on the button will be sparkling.

[karinne]

No animated gif need. It's just flat image with both state. I explain it quite clearly I think in my blog (the first link I posted)

[DDock3287]

The Second image I want to be an animated Gif. Sorry if I was unclear.

[karinne]

Ok well ... that doesn't matter ... you just add it the same way!? The non-animated on top and the animated at the bottom.

[DDock3287]

Karinne, Just to let you know, the first site you linked is now closed. Just wanted to let you know.

[karinne]

Yeah ... I know ... it's my blog! I closed it down Sorry ... the second link is basically the same

[ScottR]

I agree with everyone else but I'll take a shot in the dark here. Does the book have it listed with the word this in front of the argument in the onmouseover and onmouseout event?

It seems to me that the script may need to know what object the function is referring to.

Just a guess from having a quick glance at the script.

Also your book should have a website with all the scripts available for download. You can DL it and check it against yours.

Good Luck,
Scott

[DDock3287]

Thanks for everyone that assisted me. I have successfully implemented the CSS rollovers.

[casho]

Could we see it.