Image Swap

[Johnns]

Hi guys,

 

im looking for a way to have a 2 image swap.

 

- when i move over a button, the button "fills"

 

- also, somewhere an image appears with the "name" of the page that will over when clicking.

 

is this possible?

 

i prefer working with css

 

thanks in advance.

[TCH-Bruce]

Here is one of many CSS Rollover Turtorials that I found using a Google search.

[borfast]

The article Bruce mentioned, although a good one (hey, it's from O'Reilly... ), is a bit old. I suggest you use a more modern approach and make use of CSS rollovers.

 

The basic idea is that you set a background image for a link with the 'a' CSS selector and then set another background image for the 'hover' state of the 'a' selector (a:hover). Pretty simple

 

A better approach is to use only one image (meaning that there will be no need for preloading the images like you have to do when using Javascript) and set the a:hover background offset to some amount that will shift the background image.... ok, forget it, just look at the first link I provide below

 

If you search Google for "CSS rollover tutorial" you'll find lots of ways to do it.

Here's a few I found interesting:

http://www.kirupa.com/web-tech/css_rollovers.htm

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

http://www.collylogic.com/scripts/rollover.html

Edited December 27, 2005 by borfast