Help!, Rollover Code Help Options

[dyindyinjohnson]

Okay, I finally got the rollover thing down except I need to move my rollover image somewhere else.
How?

CODE

<style type="text/css">
div, table, tr, td, tbody {background-color:white;}

a.home{
display: block;
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position: center;
background-repeat: no-repeat;
}
</style>


<a href="http://www.google.com/" class="home">

[Mikeplyts]

You could also do the same method that I linked to but just more simpler.



Simply open the image that represents the normal state of the rollover. Now make the canvas size's height twice as high as the original image's height. Make sure your normal state is in the top half. Now paste the image that represents the hover state of the rollover into the bottom half. Save that image and upload it to the web.

Once you have the URL of the image, use this code:

CODE

<style>
a.CLASS_NAME {width:###px; height:###px; background-image: url("URL_OF_SAVED_IMAGE"); background-repeat:no-repeat; background-position:top left;}
a.CLASS_NAME:hover {width:###px; height:###px; background-image: url("URL_OF_SAVED_IMAGE"); background-repeat:no-repeat; background-position:bottom left;}</style>

I assume you know how to replace the fillers and such. One thing though, when you're putting in the value for the height, put half of the height of the saved image since your saved image is double the height of the rollover. We do this because you'll notice for the background position, we have top left as the value before the rollover and bottom left as the value after rollover. Since we inserted half the height, we cut the saved image in two halves and the background position tells the image to display either the top or bottom half.

Now, all you have to do is add your DIV code and your done. (Remember, just repeat the first code for every new rollover.)

CODE

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="CLASS_NAME"> <a href="#" class="CLASS_NAME2"> <a href="#" class="CLASS_NAME3">
</div>

Just replace the fillers accordingly.

Hopefully that wasn't too confusing.