javascript rollovers

[reekdog]

Hey,

I'm wondering if someone could help me out with onmouseover javascript code.

I'm wanting to create a roll-over effect for icons in my navigation bar (5 images). The reason I'm using images instead of normal text is because the font I'm choosing to use is not generic amongst all computers.

I'm wondering, to create a rollover for each image (the text will appear in different color when rolled over), do i need to have a javascript function mouseOver() code for each one? Or is there a simpler way of applying the rollover effect?

Appreciate any help :)

[trouble706]

Hi reekdog,
I posted a mouseover script in the freebies section of this site just a few days ago.. It will do exactly what you are trying to do. Just change the image names in the script to the names of your images and change the links to what you need them to be and you are in business.

[reekdog]

Thanks trouble706 it works perfectly!!

I was wondering, is it possible to alter this javascript so that when someone is on a page, the rollover image is viewed? I would like to add this so people remember what page they are on :)

Thanks again!

[trouble706]

Reekdog......I will have to think about that one...If it was CSS, it would be no problem, but since it is JavaScript, I am not quite sure how it can be accomplished. I will try a few things and see. Or maybe someone with more JavaScript experience than me can answer that one...

[GarrettW]

yeah... the javascript would basically check and see if location.href = "whatpageisthis.html" and then if it is, set document.getElementById("namedImage").src = "images/rolledOver.gif"
given that the appropriate button is something like: <img src="unrolled.gif" id="namedImage" alt="This button goes to a page">

... if i remember correctly. it's been a while.

[Clueful]

Hi reekdog,
I posted a mouseover script in the freebies section of this site just a few days ago.. It will do exactly what you are trying to do.

function preload() {
for ( x=0; x<totalButtons; x++ ) {
buttonUp = new Image();
buttonUp.src = buttonFolder + upSources[x];
buttonOver = new Image();
buttonOver.src = buttonFolder + overSources[x];
}
}In your post, the call to this function is commented-out, although that will have little effect. I have commented in the freebies section.

[Clueful]

I was wondering, is it possible .......... so that when someone is on a page, the rollover image is viewed? I would like to add this so people remember what page they are on :)SmartRoll (http://scripterlative.com?smartroll) can provide that functionality.

[reekdog]

The smartroll looks good, although it's a lot of extra code if i don't really need it and can work out a way to implement it into the code I'm already using (for rollovers). :)