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/

:)

[fixtatik]

i wrote a tutorial about this last month, too. =\
link

[Uronacid]

i wrote a tutorial about this last month, too. =\
link

Nice, that's written far better than what I have here. I was just showing how they did it on that website.

[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>

[Uronacid]

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>

It's true, the efficiency comes from using 1 image instead of 2. Anything else can be changed.

[Mikeplyts]

It's true, the efficiency comes from using 1 image instead of 2. Anything else can be changed.

Yeah, basically. That means less loading time and no 'blinking' or jittering. w00t.

[Uronacid]

Yeah, basically. That means less loading time and no 'blinking' or jittering. w00t.

Jeez, I was beginning to think that I was going to be ridiculed for posting this. As long as I helped one person I'm happy. It's nice to see someone who's just as excited as I was. xD

[Mikeplyts]

Jeez, I was beginning to think that I was going to be ridiculed for posting this. As long as I helped one person I'm happy. It's nice to see someone who's just as excited as I was. xD

:)

[fixtatik]

Jeez, I was beginning to think that I was going to be ridiculed for posting this. As long as I helped one person I'm happy. It's nice to see someone who's just as excited as I was. xD

it's going to be helpful for many more than one person. every tutorial i've seen for "roll overs" uses two images or javascript. ew @ both.

[Uronacid]

it's going to be helpful for many more than one person. every tutorial i've seen for "roll overs" uses two images or javascript. ew @ both.

Agreed, the best method is usually the "keep it simple stupid" method.