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 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 stuffed 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 effect 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 effect.