css rollover tutorial…

By popular demand – haha – here is a CSS rollover tutorial.
if you want to play with my turtle, feel free to rightclick it and download the image to your own computer – I only ask that you drop me a link to your site if you use it.

click here to see the turtle doing what it is supposed to.

I start out with a single image file, with one green and one blue turtle placed directly above each other. Here is my simple .gif image on the right.

Then, the code that goes into your css-script:

a.brollover {

width: 320px;
height: 220px;
background: url(gifs/turtletwo.gif) 0 0 no-repeat;

display: block;
}

a:hover.brollover {
background-position: 0 -224px;
}

this is the code that goes into your html:

<a href=”index.php” class=”brollover” ></a >

If all you wanted was my turtle, then you’d be finished now – providing you had downloaded my image, and put the bits in the right places. But. I assume you want to do this to something else. you then need to understand a bit of what’s going on:

this is how it works – how to change it to your images:

a.brollover { -you don’t have to call it brollover. but don’t lose the a. in front.
width: 320px; -self-explanatory? width of the image
height: 220px; -this is the height of the green turtle alone
background: url(gifs/turtletwo.gif) 0 0 no-repeat; -here’s the thing: put the image in a folder, and put the address here. This is veeery important.
display: block;
}

a:hover.brollover {
background-position: 0 -224px; -this is what happens when pointed at. The the image is rolled up – in this case -224pixels. Play with this till you get it right.
}-don’t forget the curlies..

in the html

<a href=”http://www.google.no/” class=”brollover” ></a >

inside the ” ” is the url to the page linked to. Just using google as example. class=brollover gets the bit from the css. Make sure the name in css and html – in this case “brollover” – is the same.

Good luck-