Image Maps in Drupal

Introduction:
Image maps used to be hugely popular as portals for websites in the early to mid-nineties. You would fire up
Dreamweaver or some shareware specific tool for making them, slice up the image, and upload it as index.html.
Now users could click parts of the image to go to specific portions of the site rather than clicking one big image
and only going to one page. Thankfully, they fell out of favor. However, my opinions aside, they can be useful
and a great tool.
On a recent project I was asked to implement a logo that consisted of two phrases. Department Name & Specific Unit. The desired functionality is that a user could click the Department Name and go to the department
site, and clicking the Specific Unit would allow them to go to the unit home page. I tossed around a few ideas
such as separate images, a custom font implemented with @font-face, and an image map. The map element of
html allows for specific links and alt attributes.

The Code:
I generally use the Zen theme for Drupal sites. I needed to alter the theme for an existing Drupal 6 site and this is
what it ended up looking like.

<div id="site-name"><strong>
<!-- Grab the path to the em theme for use with the header
image. -->
<!-- This is done so if the theme switches, the image still
appears. -->
<?php $path = drupal_get_path('theme', 'theme_name'); ?>
<img src="/<?php print $path; ?>/images/title.png"
alt="<?php print t('Home'); ?>" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map
plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR: Max Bronsema -->
<area shape="rect" coords="7,3,207,24" alt="Department
Name" href="http://department.placeofbusiness.com" />
<area shape="rect" coords="7,27,562,76" alt="Home"
href="/" />
</map>
<a href="<?php print $front_page; ?>" title="<?php print

1 of 2

t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>

</strong></div>

This code goes in the page.tpl.php file of your theme and for this specific theme it is stued in the site name or
slogan area. The first portion just keeps the header image in place if I switch to the admin area as I generally use either the default Drupal theme or the Rubik Tao combo for administration. The / in front of <?php on the <img src=
line makes Drupal follow the entire path and not insert the word content when you are not on the index page. If
you forget the / your header image disappears and you just see the alt tag for your image.
I used GIMP to create the image map. They have a great built-in plugin for this purpose. I simply copied the source
it generated and pasted it in page.tpl.php. Nothing special so far but since this is being implemented in Drupal we
can make it so much better. The usemap=#map code attribute in the img tag above is named map to support the
jQuery Map Hilight plugin written by David Lynch.

Make it snazzy with a Drupal module:

The jQuery Map Hilight module is really slick and allows you to provide some visual feedback to image maps. This
is in addition to the default hand icon that appears when you mouse over a link. In my case I made a green
shadow appear when a user hovers over the separate elements of the image map.
To get everything running do the following with Drush or your favorite method for installing modules. ($ denotes
command prompt).
1. $ drush dl jq_maphilight
2. $ drush dl jquery_plugin (This for d6, for d7 you use the libraries module)
3. $ cd modules/jq_maphilight
4. $ wget http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js
5. $ drush en jq_maphilight (Confirm with a y to enable the module)
6. Go to your site and the admin interface. Site Configuration -> JQuery Map Hilight
7. Configure the settings to your preference
Check out any image map you have and you will see a great hover eect now in action. The reason for using a
module to do this is that you can now create image maps via the WYSIWYG of your choice within Drupal and get
the nice hover eect.

2 of 2