Documente Academic
Documente Profesional
Documente Cultură
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
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.
2 of 2