Nifty Way to Hover Over Images Options

[Uronacid]

While studing a few websites I goto to see how they work I came accross a seamingly professional method to transitioning images while a user mouse is hovering over images. Slacker.com does it.

First, they created an image to represent both transitions for the image:


Second, they created a style that would only show you the portion of the image they wanted you to see until you hover over it:

CODE

<style type="text/css">
#eGadsPB{ display:none; margin:0 0 0 4px; background:url(/images/egads/premium_upgrade.jpg) no-repeat; height:68px; width:647px;}
#eGadsPB:hover{background-position:0 -68px;}
#eGadsPB a img{height:68px; width:647px;}
</style>

Thrid, they applied that style to the image:

CODE

<div id="eGadsPB"><a href="/upsell/radio/" target="_Slacker"><img src="/images/s.gif" alt="Upgrade to Slacker Premium Radio"/></a></div>

This method to doing a hover over effect is extremely effect because the user viewing your website only needs to download one image from the server in order to apply the transition. This also means that you won't have any jitter what-so-ever the first time a user connect to your site.

I guess I'm just sharing this with you guys because I didn't know and I'm always looking for ways to optimize my code. I figure others are out there looking to do the same.

Check the effect out at:
http://www.slacker.com/

:)

[Mikeplyts]

That's nice! You could also do a similiar effect by making a class for the image and then using that class in a link. Like this:

CODE

<style type="text/css">
.CLASS {display:block; width:###px; height:###px; background-image: url("IMAGE_URL_REGULAR"); background-repeat:no-repeat; background-position:top left;}
.CLASS:hover {display:block; width:###px; height:###px; background-image: url("IMAGE_URL_HOVER"); background-repeat:no-repeat; background-position:bottom left;}
</style>

(Height has to be half of original height.)

CODE

<div style="position:absolute; top:###px; left:50%; margin-left:-###px;">
<a class="CLASS" href="URL DESITNATION">
</div>