Help - Search - Members - Calendar
Full Version: Nifty Way to Hover Over Images
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
Uronacid
Apr 9 2009, 12:40 PM
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
Apr 9 2009, 12:52 PM
i wrote a tutorial about this last month, too. =\
link
Uronacid
Apr 9 2009, 12:53 PM
QUOTE(fixtatik @ Apr 9 2009, 01:52 PM) *
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
Apr 9 2009, 12:54 PM
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>


_smile.gif
Uronacid
Apr 9 2009, 01:09 PM
QUOTE(Mikeplyts @ Apr 9 2009, 01:54 PM) *
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>


_smile.gif



It's true, the efficiency comes from using 1 image instead of 2. Anything else can be changed.
Mikeplyts
Apr 9 2009, 01:11 PM
QUOTE(Uronacid @ Apr 9 2009, 02:09 PM) *
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
Apr 9 2009, 01:16 PM
QUOTE(Mikeplyts @ Apr 9 2009, 02:11 PM) *
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
Apr 9 2009, 01:17 PM
QUOTE(Uronacid @ Apr 9 2009, 02:16 PM) *
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


thumbsup.gif :)
fixtatik
Apr 9 2009, 01:28 PM
QUOTE(Uronacid @ Apr 9 2009, 02:16 PM) *
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
Apr 9 2009, 01:33 PM
QUOTE(fixtatik @ Apr 9 2009, 02:28 PM) *
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.