Using DIV and SPAN Elements as Clickable Links

0

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Enter your email address:

Never Spam

From time to time it is helpful to make entire DIV or SPAN click-able as link would be. This is often helpful when you want to make a section of an image, or perhaps a background image function as a link would.

The effect is made possible with some simple JavaScript that uses the “onclick” action to trigger the link behavior.

Say you have a simplified page layout like this:

<div id="xyz_main">
    <div id="xyz_header"> Header </div>
    <div id="xyz_body"> Body </div>
    <div id="xyz_footer"> Footer </div>
</div>

And you have set the header to include a logo image with CSS:

#xyz_header {
    background: url(images/xyz_logo.jpg);
    width: 50px;
    height: 50px;
}

Which results in a page that looks something like this:

Now you want to make the header strip into a link so that any click within that DIV will take the visitor back to the home page of your site.

To do this we are going to add some JavaScript code to the DIV tag on the HTML side of the site (additions have been bolded):

<div id="xyz_main">
    <div id="xyz_header" onclick="
    location.href='http://www.example.com';">
    Header </div>
    <div id="xyz_body"> Body </div>
    <div id="xyz_footer"> Footer </div>
</div>

This results in the following:

This makes the header div act like a link and now works when it is clicked; however, people are naturally used to seeing their cursor change when they hover over a link. Without the cursor change to let a person know that they are hovering on a link, they will not know that they can click the image.

To fix this, you can style the cursor on the CSS to produce the natural “pointer” cursor when they have hovered over the header with their mouse. This is done by adding some style elements to the CSS for the “xyz_header” DIV (changes are bolded):

#xyz_header {
    background: url(images/xyz_logo.jpg);
    cursor: pointer;
    width: 50px;
    height: 50px;
}

This final style change will result in a page that looks like this:

That’s it! Just like that you have a header background image that can be clicked like a link. This can be used to make any DIV or SPAN a link, as well as make any background image a link.