mcld.co.uk

Edit: THIS INFORMATION IS OUT OF DATE. Wordpress has changed a lot since this blog article was published. I don't have any updated info for you, sorry.

Someone I know is setting up a wordpress website, and wanted to use an imagemap to put links in the header image. It's tricky, because the default template uses an image as background not foreground, and you can't use an imagemap with that.

Here's a quick hack for making it possible: Find the file /wp-content/themes/default/header.php and open it in a text editor. Near the end of that file you'll find the h1 element where the heading is printed. The block looks like this:

<div id="header" role="banner">
    <div id="headerimg">
        <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>
    </div>
</div>

The quick hack is to change it like this:

<div id="header" role="banner" style="background-image: none !important;">
    <div id="headerimg">
        <h1 style="margin: 0px; padding: 0px;">
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/mynewimage.png" alt="<?php bloginfo('name'); ?>" id="_Image-Maps_3200907261653144"  usemap="#Image-Maps_3200907261653144" />
        </h1>
        <map id="_Image-Maps_3200907261653144" name="Image-Maps_3200907261653144">
            <area shape="rect" coords="32,20,234,188" href="http://www.parpface.com/" alt="go to parpface" title="go to parpface"    />
        </map>
    </div>
</div>

There are four changes:

• I added some CSS in that first line to stop the background image from showing.
• I added an img tag inside the h1 tag to show my image
• I added some CSS to the h1 tag to stop it having a big empty border
• I added the image map - i.e. the map tag and all that

That's pretty hacky but it seems to work.