How to make your header a clickable image map header

Check out the header for ThesisHacker at the top of this page.  Roll over “Thesis Hacker” and “subscribe” with your mouse.  See how they’re clickable?  Read the following tutorial and I’ll explain how this is easily done. A little knowledge of html and css is probably advised and you can go to w3schools to learn more just so you can understand some of the coding going on here.

In my header, “Thesis Hacker” and “subscribe” are images.  So the first thing I did was to make whatever I wanted  clickable, an image.  I uploaded the images to the thesis/custom/images folder on my server.

To create a list of  images in my header, in my custom_functions.php file I added the following code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*image map header*/
function my_function() { ?>
<div id =”imagemap_header” ><img src=”<?php bloginfo(’template_directory’) ?>/custom/images/thesisheader2.png”  alt=”clickable header” />
<ul>
<li class=”title”>
<a href=”http://www.thesishacker.com/” title=”take me back to the home page”></a>
</li>
<li class=”rssfeed”>
<a href=”http://www.thesishacker.com/?feed=rss2″ title=”Join and learn”></a>
</li>
</ul>
</div>
<?php }
remove_action ( ‘thesis_hook_header’,'thesis_default_header’);
add_action (’thesis_hook_header’, ‘my_function’);

Note a few things here:

I added my header image inside a named div tag

In my function I created an html unordered list and made the separate images a list item.

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*image map header styles*/
.custom #imagemap_header {
width: 950px;
height: 190px;
position: relative;
}
.custom #imagemap_header ul {
margin: 0;
padding: 0px;
list-style: none;
}
.custom #imagemap_header .title a {
position: absolute;
width: 493px;
height: 140px;
top: 47px;
left: 235px;
}
.custom #imagemap_header .rssfeed a {
position: absolute;
width: 120px;
height: 33px;
top: 136px;
right: 50px;
}

Note a few things here:

I set the width and height of the div so that it matches the dimensions of the image.  Then I set the position property of the div to relative. This is the key to this technique as it allows the enclosed links to be positioned absolutely, in relation to the edges of the div and therefore, the image itself.

I didn’t want list bullets to display so I removed them by setting the list-style property to none.

I labeled the entire header image where all my images are going to reside as “imagemap_header” and gave it a relative position with a size that I found to work well.

The top and left values mean that the area that is clickable is x amount of pixels from the top and left of the header image itself and in turn surround the actual images I placed inside the header image.

Firebug is essential here and makes life a lot easier instead of trying to guestimate what the top and left values are.

Tagged as: absolute, div, header, how to make your header a clickable image map header, image map, relative, thesis