Image Rollovers
This tutorial will teach you how to make an image/link rollover.
Ex:
First things first, we're gonna need the images you're going to use. "Image1 URL" will be where you put the url of the image you want used first,
and "Image2 URL" will be the URL of the image that will show up when you hover over the first image. Here are the images I'm gunna use:
Image1:
Image2:
Remember that you'll need to know the exact height and width of these images.
You'll have to put them where it says "NUMBER". Now let's make the style tags.
This will be all the coding for the image hover:
Paste into About Me:
<style type="text/css">
.roll {display:block;width:NUMBERpx;height:NUMBERpx;
background-color:transparent;
background-image:url("IMAGE1 URL");
background-repeat:no-repeat; background-position:top left; }
.roll:hover {display:block;width:NUMBERpx;height:NUMBERpx;
background-color:transparent;
background-image:url("IMAGE2 URL");
background-repeat:no-repeat; background-position:bottom left;}
</style>
Finally, let's make the image hover link:
<a href="URL HERE" class="roll">
Again, remember that the "roll" part of the link must match up with the coding. Now just place this link
where you want the image hover to show up and WAA LAA!
