More Rollover troubles., sorry i keep posting about them. Options

[lucasnotreally]

so i have figured out one way to do rollovers, where i have a class for each individual rollover then past it in the slice with a spacer over top, but the backgrounds take longer than desirable to load, and there is a black hover for a good 2 seconds before the image shows up.

i havent seen these on other layouts, and i dont know what the problem is.


here is the page i did: myspace.com/wearemissions

here is one i like that doesnt have the lag: myspace.com/lifeonrepeat

sorry again for posting so many questions about rollovers, im just trying to perfect them now so i dont have to keep working on them in the future.

thanks in advance =)

*****edit*****

here is the code im using http://www.createblog.com/forums/index.php...t&p=3217913 (the one in the post from mike)

[Mikeplyts]

Well, what's the code you're using?


You can also try this method:

First, get your two images. Make a new document in your image editing software that's double the height of the image before rollover. Paste your image before rollover and position it in the top half. Then, take the image after rollover and paste it as well except position it on the bottom half. Now, save your image.

Next, add this code to your CSS:

CODE

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

You can change CLASS_NAME to whatever you want you want to name your class. Put in the appropriate value for the width but for the height, since you have your image with both before and after on it with doubled height, then go ahead and put in half of the height in the height property so you can separate the image in half. The way the rollover works is since the image is separated in half, we use the background-position property to enable which half is shown so in this case, since your before rollover is on the top half of the image, we will use top-left for the value for the before rollover class (.CLASS_NAME) to display the top half and bottom-left for the value on the after rollover class (.CLASS_NAME:hover) to display the bottom half.

Now, add this to your HTML:

CODE

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

Replace ### with the appropriate values, CLASS_NAME will be the same name for the class you defined in the CSS just without the period, and LINK_URL will be the URL to where you want to link to. You can change the target if you want, but I'll leave it as "_self" so that the link doesn't open in a new window/tab.

Now, save and you should be done! You can add more classes and div's if you want but you just have to repeat the codes I gave you with the appropriate classes.

Sorry if that was kind of confusing and long. :p