Comments on: Seamless Image Rollovers Using CSS http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/ Tue, 19 Mar 2013 01:28:15 +0000 hourly 1 http://wordpress.org/?v=3.5.1 By: Stanley http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14660 Stanley Tue, 18 May 2010 18:14:18 +0000 http://www.themelab.com/?p=1888#comment-14660 WOW! Nice tutorial! I like it!

]]> By: Milos Milikic http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14330 Milos Milikic Wed, 21 Apr 2010 07:21:48 +0000 http://www.themelab.com/?p=1888#comment-14330 No problem ;) Cheers

]]> By: Leland http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14327 Leland Tue, 20 Apr 2010 22:01:25 +0000 http://www.themelab.com/?p=1888#comment-14327 Awesome, I know in WordPress it sometimes spits out default classes for active page items if you use their functions.

Like .current-page-item (for active pages) or .current-cat for active category archive.

Thanks for the tips.

]]> By: Milos Milikic http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14326 Milos Milikic Tue, 20 Apr 2010 21:35:00 +0000 http://www.themelab.com/?p=1888#comment-14326 I mean CSS and a little bit of PHP. In this case we need that php to declare when link is in selected state. Here is example in short for web site with two pages (Page1 and Page2):

Page1 code:

<?php $thisPage="Welcome to Page1!"; ?>
<head>
<title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title>
...
</head>
<body>
<ul id="menu">
<li><a class="page1" <?php if ($thisPage=="Welcome to Page1!") echo "id=\"selected\""; ?> href="page1.php">Page1</a></li>
<li><a class="page2" <?php if ($thisPage=="Welcome to Page2!") echo "id=\"selected\""; ?> href="page2.php">Page2</a></li>
</ul>
...content...
</body>

For page2 just $thisPage variable set to “Welcome to Page2!”

CSS for links:
#menu a {
background-position: left top;
}
#menu a:hover {
background-position: left center;
}
#menu a#selected, #menu a#selected:hover{
background-position: left bottom;
}

That’s it :) Cheers

]]> By: Leland http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14314 Leland Tue, 20 Apr 2010 00:08:50 +0000 http://www.themelab.com/?p=1888#comment-14314 Thanks Iwana, glad you liked the tutorial. Appreciate the kind words about my site as well. :D

]]> By: Leland http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14313 Leland Tue, 20 Apr 2010 00:08:10 +0000 http://www.themelab.com/?p=1888#comment-14313 There are definitely some more advanced ways of using this technique. The one I did was probably the simplest of the bunch.

I also noticed something similar on CSS Tricks which I found interesting.

http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png

]]> By: Leland http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14312 Leland Tue, 20 Apr 2010 00:06:59 +0000 http://www.themelab.com/?p=1888#comment-14312 Glad you liked the tut, Anto.

]]> By: Saad Bassi http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14311 Saad Bassi Mon, 19 Apr 2010 21:42:59 +0000 http://www.themelab.com/?p=1888#comment-14311 I will suggest you to examine the navigation of Apple’s official website navigation. Its an awesome use of CSS sprites. Another very effective use of css sprites can be seen here.

http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png

See this image and then see how Martin broken that up on different places in his blog.:}

]]> By: Iwani Khalid http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14310 Iwani Khalid Mon, 19 Apr 2010 21:35:33 +0000 http://www.themelab.com/?p=1888#comment-14310 Hey Leland,

This is a very very good post for beginners who are still using 2 different images to create image rollovers – very well-written, short and sweet! Beautiful buttons too!

I’ve just started using sprites recently on my clients’ projects (found it rather troublesome last time lol).

I have a huge image which have all the icons, buttons that I needed for the website. Then I used background-position to display each elements. It can get really really tedious though if there are just too many elements but it’s really worth it

Btw, it’s my first time here on your website. I love it so much, a lot of beautiful & subtle details

]]> By: Leland http://www.themelab.com/2010/04/19/seamless-image-rollovers-using-css/#comment-14309 Leland Mon, 19 Apr 2010 21:04:14 +0000 http://www.themelab.com/?p=1888#comment-14309 Thanks for the clarification, Milos. Maybe I’ll do a follow up post on how to do one with a selected/active state too, while still using one image.

You mean CSS code (and not PHP) right?

]]>