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:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css"> 
a img {
    border-width:0;
  }
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;
  }
</style>
</head>
<body>
<a href="#"><img src="square.png"/></a>
</body>
</html>

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.
References
  1. Introducing IE=EmulateIE7
  2. Sprite

Comments

Popular posts from this blog

CREATE DATABASE (SMO)

Enable JSON serialization in your Visual Studio 2010 project

jQuery | remove inline style