Make Your Head Clickable

A very common trend in user interface design for the web is to make the logo or banner on the top of your site a clickable link back to the home page. Since my header image on this blog is just an empty <div></div> with a background image defined in CSS, I couldn’t quite figure out how to accomplish this, until today. While reading various random blogs, I stumbled upon the trick to make the space within any block-level division element a clickable navigation area. The trick involves using a little Javascript and the “onclick” event. Here’s an illustrative example:

<div id="banner"></div>

becomes…

<div id="banner" onclick="location.href='http://www.yoursite.com/';" style="cursor: pointer;"></div>

Notice that you can style the way that the cursor responds when you mouse over the header as well. This gives the user some feedback that they just moused over a clickable area, but doing so is completely optional. Some people are so used to clicking on headers to get out of web site dead ends that they will click it anyway in desperation. The cursor can be changed to several different feedback responses based on the “cursor” attribute in CSS. Instead of iterating each cursor mode and what it looks like here I will simply give you a link.

This trick makes the entire area within the division a clickable entity. This is a very useful trick but won’t work for people who have Javascript turned off for whatever reason. Don’t rely on it as a way to navigate to your homepage.