homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

image rollovers.

 12:21 pm on Aug 30, 2010 (gmt 0)

Whats the best way todo image rollovers these days.

must be cross broswer compatable etc.

javascript? php? dhtml?



 5:57 pm on Aug 30, 2010 (gmt 0)

None of those . . . CSS. :-)

The best way I've found is to create the image as a background image on the anchor:

<a id="home-link" class="main-nav" href="/">Home</a>

#home-link {
display: block;
width: 150px;
background:url(/images/home-nav.gif) top left no-repeat;

The image has **both** the normal and mouseover state, with the normal at top

--- HOME ---
--- HOME --- <-- mouseover


.main-nav:hover {
background-position: 0 -25px;

the numbers may be incorrect, but you get the idea, play with it. The idea is to shift the background up by the height of the button.)

If all your images are the same size, you can use the class, otherwise you may need to use



This loads both normal and hover at the same time in one image, faster loading, no delay for second image to load, no Javascript required.


 10:01 am on Aug 31, 2010 (gmt 0)

None of those . . . CSS. :-)


One little addition that I use when you have the background-position of the 'normal' state set to 'top left' you can set the hover position using keywords :

.main-nav:hover {
background-position: bottom left;

So you don't have to worry about setting the offset ('-25px' in this case) for the image in question.


 8:25 pm on Aug 31, 2010 (gmt 0)

thanks guys im going to play around with that!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved