For many years hover-effects on images working as links has been accomplished by using JavaScript. They worked 5 years ago and they still do - at least for those who still haven't disabled (partially or completely) JS. According to W3Schools Browser Statistics, about 10% have JS completely disabled. I bet that an even higher percentage are people who have partially disabled JS.
The method I'll demonstrate here requires nothing but basic support for images and CSS, as well as supply a usable alternative to those who don't (text-only browsers, mobile phones, website readers for people with disabilities, etc).
The image
In this example we'll use these two images:
The first one is the normal state and the second is the image displayed when the mouse hovers over it. Both are the same size - 100 x 50px.
There are two ways of making a hover-effect using CSS. The first one is to simply change the background-image attribute from button1.gif to button2.gif (the hover-image). The bad thing is that button2.gif isn't downloaded until it's actually needed. The user hovering the link will experience a delay of a few seconds (depending on the size of the image and the user's connection) when hovering the link for the first time, while the browser downloads the image. This may not seem like a big problem, but there's an easy way to avoid it: If we take the two images above and "glue" them together into one single image file, there won't be any delay, because (obviously) it'll have no choice but to download the whole image. Here's how the image should look like:
As you can see I've made the image twice as high so both the hover state and the normal state fits perfectly. Only thing left is to use CSS to decide which part of the image to display where and when.
The HTML
| Link text |
As you can see, there is no . That's because we'll use the image as a background in the a. It's important to have a link text as if it was a normal link. That way people with older, text-only browsers or similar will also be able to see and click the link - with or without the image. I've put the text inside a -tag so it'll be easy to hide it with CSS.
The CSS
| a.imageLink {
display:block; background:url(path/to/image.png) top no-repeat; width:100px; height:50px; text-decoration:none; } a.imageLink:hover { background-position:bottom; } a.imageLink span { visibility:hidden; } |
First of all we define the a as a block element with a spesific size (the size of the top- or bottom half of the image seen above) and the background is set to the image that contains both the normal and hover state image. top no-repeat makes sure the background image is positioned at the top and doesn't repeat itself, as it would by default.
a.imageLink:hover contain the changes done when the mouse hovers the link. The only thing happening is that the background position is changed from top (in it's normal state) to bottom.
a.imageLink span simply tells the browser to hide any span-element inside this specific link. This way modern browsers with CSS support will display the image and not the text, and browsers with no support for CSS will simply display the text as if it was a normal link.
Example
For a demonstration of how this would look when finished, take a look at the example.
Reply
HTML ...
// the span is for older browsers or people who have the CSS turned off.
<a href="add link here to wherever" class="imageLink"><span>put text here</span></a>
CSS...
//perfect generic name or you can change the imageLink name but is a good class name
a.imageLink {
display:block;
overflow:auto; // added this to allow for overflow of image
background:url(image path goes here.png) top no-repeat;
width:50px; // put what ever your dimensions are here
height:50px;
text-decor
Reply
}
a.imageLink:hover {
background:url(youimagepathegoeshere2.png) top no-repeat; // added different image for hover effect
}
a.imageLink span {
visibility:hidden;
}
got cut off but 100% tested and works all a tags with the class imageLink will display the image with hover effect
Reply
Reply
Reply
Reply