Web Hosting Talk







View Full Version : Mouse rollover effect..


mkelly09
08-11-2005, 07:52 PM
Hello,

I am finishing up one of my first web pages that I have made.. it is located at:

http://www.pokerjocks.com/newlayout/index2.html

I have what i hope is a really simple question.. I need the Navigation text to change as you put your mouse over the icons to the right of it. So if you were to put your mouse over the envelope, navigation would say "Email" etc.. I originally tried to do this in flash, but i am not very familiar with either flash or javascript and found many tutorials for making the button itself change - but not for changing a different picture altogether.

I know it is probably simple as i have seen this effect on many websites, however I am having difficulty locating a tutorial for this.

If anyone knows of a tutorial, or can quickly explain to me how to do this, i would greatly appreciate it.

Thanks!

the_pm
08-11-2005, 08:51 PM
If you're familiar with CSS, you can create a single file with both the regular and rollover instance side by side. Then position the file as a background underneath a transparent gif (with appropriate alt text), and use the background-position style to swap the instance back and forth so it appears to be changing every time you roll over it. This method means you don't need to preload, and the markup to achieve it can be created very efficiently.

mkelly09
08-11-2005, 09:19 PM
Thanks for the response. Unfortunately i'm not that familiar with CSS, and i don't really know where to start.. does anyone know of any tutorials for this sort of thing? I can use flash too, if it would be easier in that?

the_pm
08-11-2005, 10:57 PM
Flash can achieve the effect you desire visually, but there are some serious drawbacks to using it as your primary means of navigation. Drawbacks generally surround usability issues and some difficulties with search engines.

Here's a good basic tutorial on using CSS to alter navigation: http://www.echoecho.com/csslinks.htm

Once you have the basics down, it's just a matter of strategy...and that's what I laid out above ;)

haretu
08-11-2005, 11:07 PM
check this might help (http://www.kidslovepc.com/javascript/javascript.html)