1

Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.

Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:

I have only one image "Logo" but it will show as 2 different logo each with a rollover effect. I use a sprite (only 1 image containing my 4 logos) and I just change it's position.

Here I insert my image in a div with

<div id="logo-rollover-1" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

Then I insert in another div the same image but with a different id

<div id="logo-rollover-2" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

Now my CSS:

.logo-rollover {
    background: #ffd42a url('path-to-your-image');
    width: 230px;
    float: left;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.logo-rollover img { width: 460px; height: 260px; }

.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }

#logo-rollover-1 { background-position: 0px -130px; }

#logo-rollover-2 { background-position: -230px -130px; }

#logo-rollover-2 img { right: 230px; position: relative; display: block; }

Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.

No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"

Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.

Tip: use the same path for your image everywhere. I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.

Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.

Comment appreciated.

Community
  • 1
  • 1
Sylvain Larose
  • 11
  • 1
  • 3
  • 1
    I think you should probably post this in http://codereview.stackexchange.com/ -- That said, I feel like you are using the best approach. Be sure to add alt text to Logo. – troynt May 25 '11 at 07:59
  • Yes, I had put complete code but was not allowed in this post... I edited it and yes it has alt text. thank's – Sylvain Larose May 25 '11 at 08:09
  • [...for future reference, we have a site for this.](http://codereview.stackexchange.com) –  May 25 '11 at 17:05

2 Answers2

3

Why not completely removing inner <img> and create logo using CSS background?

<a id="logo">Logo</a>

#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0; 
overflow:hidden; text-indent:-1000px; display:block; }

#logo:hover { background-position:0 -60px; }

Explanation:

<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }

overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.

background sets the background color of your div, initialy alligned to 0, 0

background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.

Piotr Rochala
  • 7,748
  • 2
  • 33
  • 54
  • @Sylvain Larose: Even though you didn't want to use a link I think it's the most suitable element for this use. – Marcel May 25 '11 at 10:46
  • oh, I missed the point about 'no link' which IMHO is a silly requirement. ALL users expect to be redirected to the homepage when they click on the logo. It is a common usability expectation. – Piotr Rochala May 25 '11 at 11:10
  • you miss the point again, I never said it was for the main website logo. Of course my main website logo redirect to the homepage... I made this code for decorative image in my pages and did not want to use ref "#" or javascript(void) like most people do and is not valid. This image rollover is intended for use with no link and to validate. Nothing more or less. –  May 26 '11 at 00:18
0

nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)

strauberry
  • 4,189
  • 5
  • 34
  • 50
  • Thank You, I edited the code to reflect your suggestion. Now this has to be a near perfect code, I finally made it! – Sylvain Larose May 25 '11 at 08:20
  • Nice! You can put the background-url stuff there, too! – strauberry May 25 '11 at 08:22
  • You are right about adding the link in the class instead of twice in the id, I edited the post to reflect your suggestion. I also added a display:block to the id img for compatibility with Opera. Now it's working fine in IE6-7-8-9, Opera, Firefox, Chrome & Safari. –  May 26 '11 at 00:18