Showing posts from October, 2010

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):
InactiveHovered overActive (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.
Add an image link, that is an IMG tag nested into an A tag:
<a href="#"><img src="square.png" /></a>
Remove the border around the image:
a img {border-width:0;}
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;}
To make it work under Mozilla and WebKit, provide …