Create a rich image link in 5 simple steps

Even some well designed sites make minor usability faux pas. Let’s look at the homepage of Commotion Creative, as I saw it on October 19, 2010, to be more specific, at the Featured Projects section. The links look nice but they do not change their state whatever action you take – hover over or click (image below).

As a user, I expect these links to have three states (something like in the image below):
  1. Inactive
  2. Hovered over
  3. Active (Pressed)
Here is a quick recipe how to make a link respond to the user’s actions, with an image and a few CSS styles.
  1. Add an image link, that is an IMG tag nested into an A tag:
    <a href="#"><img src="square.png" /></a>
  2. Remove the border around the image:
    a img {border-width:0;}
  3. Add the three styles for the A tag:
    a {background-color:#dadada;padding:7px;display:block;width:91px;height:81px;}
    a:hover {border:1px solid #555;padding:6px;}
    a:active {border:7px solid #555;padding:0;}
  4. To make it work under Mozilla and WebKit, provide a with the following style:
    a { …display:block;… }
  5. IE 8 will render your image link properly only if you introduce the “IE=EmulateIE7” tag into your markup:
    <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"></meta>

Below is a minimalistic web page that hosts such an image link:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css"> 
a img {
a {
    width:91px; height:81px;
a:hover {
    border:1px solid #555;
a:active {
    border:7px solid #555;
<a href="#"><img src="square.png"/></a>

This solution works in IE 6-8, FF3 and Google Chrome 3-4.

This the same trick can be done by widely [ab]used sprites. Although the CSS sprites make for a very powerful technique, sometimes you can replace them with the trick I described above.
  1. Introducing IE=EmulateIE7
  2. Sprite


Popular posts from this blog


Enable JSON serialization in your Visual Studio 2010 project