Simple CSS Image Rollover
Back when I first started doing web development I used Javascript Image objects and onMouseOver and onMouseOut to make image rollovers for web pages. This worked well, but was kind of clunky and required 2 separate images.
Now I use CSS with only one image to do these same rollovers. You are basically just shifting the background image's X coordinate to give the rollover effect.
The following browsers support this:
IE 5.5+, Firefox 1.07+, Opera 7.23+, Mozilla 1.7.12+, Netscape 6.02+, Safari 2.0+, Konqueror 3.4.3+
Example
The Image
CSS
CSS:
-
a.srollover {
-
display: block;
-
width: 22px;
-
height: 22px;
-
background: url("close.gif") 0 0 no-repeat;
-
text-decoration: none;
-
}
-
-
a:hover.srollover {
-
background-position: -22px 0;
-
}
HTML
HTML:
My name is Noah Everett. I live in Tulsa, OK. I started 
If IE has its caching set to "check every time", you'll see a very unpleasant flicker onmouseover using this technique. Google around a little, it's a well-known and easily-reproduced bug.
Thanks for the heads up on this issue Peter.
i love this technique (:
Nice--never thought of doing it this way. I'll be integrating this into my projects soon.
This is not a new technique by any means, in fact it's been around for probably a year or more. As Peter mentioned: it's nice, but hardly without faults.
xxdesmus,
I don't believe anyone said it was a new technique. Thanks for the comment!
@Peter Harkins:
There exists a workaround for this problem:
http://dean.edwards.name/my/flicker.html
which is working fine here...
[...] You can review the full artcile with example how to achieve this, here. button, css, image rollover, javascript, OnMouseOut OnMouseOver [...]
Nice, but I'll stick with what I use. Because I found when
you click your mouse and drag outside the image area
and repeat this quickly a couple of times, you'll see the black
image with a white vertical stripe. (using Firefox 2.0)
This has been around for more like 3 years. It's cool though.
This is so elegant.. it'd be great if I could do a horizontal menu with it, but I can't seem to make it happen... thinking....
Greeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeaaaaaaaaaaaaaaaaaaaaaattttttttttttttttttttt!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
For the flicker bug, if you have a parent tag, you can set the image as a background to it, so during the little flicker, the Hover image will show up even in IE.
this is cool , but i cant seem to get multiple buttons to sit horizontally? any clues!
ok im retarded
nav li {
float: left;
}
The flicker is not a problem with this solution because this is a single file. The flicker only happens when using two images to do a mouseover. Larger buttons are somewhat delayed, not as clean as two seperate images, but much easier to maintain and works across all major browsers.
So, when I offset the top margin by -10px, in Firefox, the rollover effect only works when I roll over the bottom portion of the image (18 x 18). How can I work around this?
Works great, but once the image/URL is clicked a nasty border is shown around the image. See the exampel above. Sort of ruins it all
(Netscape)
@ Morph: umm... doesn't the same thing happen with hyperlinks?
[...] Veja um exemplo em funcionamento. Esse tutorial foi retirado do site: Find Motive. [...]
@Pieter-Jan Savat
"you'll see the black
image with a white vertical stripe."
That's probably because you end up highlighting (selecting) the text inside the anchor (the non-breaking space)
@ Morph: Do you know of a method of removing the "nasty border"?
Because I sure don't. And I agree with "some guy" - the same thing happens with hyperlinks.
And why would you need to click the picture anyway?
morph.. that's not happening with me
what would appear if the browser is older than the supported listed ..
anythiing?
To Pieter-Jan Savat,
The white vertical stripe comes probably because the cursor manages it to mark the text content because the solution is implemented as a link (tag a). I solved that problem by removing the space (nbsp;) from the link.
Cheers
Helge
[...] AW: mouseover effekt funktioniert nicht - Heute, 18:21 z.B. auf diese Art: Simple CSS Image Rollover - Find Motive Free Download & Internetguide [...]
I love this for its simplicity - but it has a major drawback for me. If the stylesheet becomes disconnected or if someone visits the site with different device with a non-standard browser (blackberry, treo, etc) the links don't show up at all! Web is supposed to be about delivering information, and without the stylesheet there's no information delivered...
Actually - on second thought - a workaround for this is to drop some link text into a span tag within the anchor that is hidden:
a.srollover span {
display:none;
}
Alternate Text
Haven't tried it. But it makes sense to me now...
[...] Possible solutionshere and here, both of which will require me to start over. [...]
How do you make multiple buttons with all horizontal aligned.
Thanks
@Morph: To get rid of the nasty outline when clicking on a link:
:focus {
outline: 0;
}
Doesn't work in all browsers, but it's probably the best you can do.
[...] CSS ile rollover yapım teknigi [...]
If you are trying to use this to make a horizontal menu replace this:
display: block;
With this:
display: inline-block;
That should do the trick.
Good effect but buggy in IE8 Beta.
IE8 Beta? Report it as a bug to the IE team then.
I need to know the same thing, didnt figured it out yet. anyone?
Great tip! Works like a charm! Thanks for sharing!