Css Image Border Rollovers

CSS Image Border Rollovers

The prevalence of CSS2 enabled browsers has opened up a variety of methods and techniques for the visual enhancement of HTML pages. Used correctly, it can also enhance page useability, and improve download times. Using a simple CSS structure, inline images can benefit from the same "mouseover" effects that have struck text links over the past couple of years.

As the :link, :hover, :active and :visited selectors have been applied to text hyperlinks, these can also be extended to hyperlink <IMG> tags. At their most basic level, we can provide a visual confirmation of a link, and that this link is active, by changing the border color of the required image.

Apply a class of (for example, as I first used this technique on a photogallery) fotgal to an image that is used as a hyperlink:

Apply the CSS classes:

.fotgal {border:1px; border-thickness: 1px; border-color: #000; border-style: solid;}

This firstly establishes any element with a class of fotgal with a 1 pixel black border.

Then compound this with:

A:hover, A:active {color: #fff}
A:hover .fotgal, A:active .fotgal {border:1px; border-thickness: 1px; border-color: #fff; border-style: solid}

This, in a nutshell, will instruct the browser to change the border colour of the element, upon hover or active.

Here's the full source code:

src="http://www.carbonchip.com/evolt1/evolt_test_image.gif" width="121"
height="43" border="0" vspace="2">
src="http://www.carbonchip.com/evolt1/evolt_test_image.gif" width="121"
height="43" border="0" vspace="2">
src="http://www.carbonchip.com/evolt1/evolt_test_image.gif" width="121"
height="43" border="0" vspace="2">
src="http://www.carbonchip.com/evolt1/evolt_test_image.gif" width="121"
height="43" border="0" vspace="2">

Or, you can download it here.

My first real-world example of this can be seen here.

Reasons for using this method???

• Avoid the use of bandwidth-heavy javascript rollovers (only 1 image download instead of two).

• Performs well under IE4+, degrades very gracefully under other browsers.

• Provides a clear visual connection between hyperlink and active area.

Aside from just changing the border colour, this can be extended to using IE filters (alpha etc), although this does not have the near-immediate feedback/response that the border-colour change has. A variety of effects can be exploited with this technique.

I'd welcome seeing other uses/variations of this technique, email me at banrett@carbonchip.com