home info scripts guides links contact

Image rollovers

Ever see those nifty images that actually change when you mouseover? Aren't those cool? I use those a lot because I simply hate using image mapping all the time with no link effect. Rollovers are a must, they're pleasing to the eye and if you're using an entire rollover navigation, you'll always know what link you're on, unlike image mapping.

It seems hard, but really is quite simple. Here is a demo:

Demo

How it's done

Here is the script you're to put on any/all of the pages you'll be using rollover in:


Place that code anywhere that you see fit for your rollovers (usually at the top of the page).

Next, to get the images/link to change, the code looks like this:

<a href="http://www.domain.com" target="_blank"> <img src="image1.jpg" hsrc="image2.jpg"/></a>

Pretty simple. Just replace domain.com with the link you want your image to go to, replace image1.jpg to be the image you want to initially show up, and image2 to be the image that shows up on mouseover. For example, my image 1 would be the black and white flower, and image 2 would be the colored one.

Note: you do not have to use links, you can have just a plain, unlinked image for rollovers as well.



copyright 2008 Maggie N