• View
• Edit
• History
• Attach
• Print
• Backlinks

ImageMap

Questions answered by this recipe

• How do I create a clickable image?
• How do I create links inside an image?
• How do I create an image map?
• How do I create an image toolbar, buttonbar or image menu bar?

Answer

The script imagemap.phpΔ adds markup to define image maps from within the wiki page.

Download imagemap.phpΔ and copy to the cookbook directory, install by adding to config.php:

        include_once("$FarmD/cookbook/imagemap.php");

Syntax

It does not matter where on the page the imgmap markup is written, it does not produce any output by itself, only via the associated image.

Each (:area .... :) markup includes a number of parameters:

• href=Group.PageName or
• href=http://example.com/ defines the link associated with the area of the image.
• shape= defines the shape of the area. shape=rect for a rectangle, shape=circle or shape=polygon. shape=default without coords associates the whole image.
• coords= defines the areas coordinates as a string of numbers separated by commas, in pixels.
  • for a rectangle: coords=x1,y1,x2,y2 (topleft corner 1, bottom right corner 2, measured from left image border distance x and from top image border distance y)
  • for a circle: coords=x,y,r (left to centre, top to centre, circle radius)
  • for a polygon: coords=x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,... (corners of polygon, each corner measured frm left as x and from top as y)

Further optional parameters:

• title=' title name ' (shows as tooltip when moused over) Make sure that several words are enclosed in single quote marks '...'
• alt='alternative text' (for browsers with no image support)
• tabindex=number (to aid tab navigation)
• accesskey='key' (to aid keyboard navigation)
• onclick='javascript commands' (needs $EnableOnclickJavascripting turned on, default is off)

If any areas defined overlap each other then the area on top should come before the area underneath. If the image as a whole is defined as default area with shape=default it should come last, just before the (:imgmapend:) markup.

Example

%usemap=#testmap center%Attach:imagemap-sample.jpg (:imgmap testmap:) (:area shape=rect coords=10,83,118,227 href=PmWiki.Documentation title='Documentation' :) (:area shape=polygon coords=157,10,215,10,245,60,215,110,155,110,125,60 href=Cookbook.cookbook title='Cookbook' :) (:area shape=circle coords=110,80,60 href="http://google.com" title='Green: Google' :) (:area shape=polygon coords=155,140,240,140,240,215,215,215,215,155,155,155 href=Cookbook.Skins title='Skins' :) (:area shape=default href=Main.HomePage title='Default area: HomePage' :) (:imgmapend:)

Notes

Avoid paragraphs in the list of imagemap areas: Using paragraph markup (two linebreaks in succession = an empty line) causes the HTML output of the script to be non-conformal with XHML 1.0 and might cause the map to work improperly in some browsers.

Conflict with LineBreaks: If you configured your wiki to honour line breaks (new lines) then you need to put before the (:imgmap:) markup (:nolinebreaks:) and after (:imgmapend:) put (:linebreaks:).

Releases

• 2006-10-28: Added $RecipeInfo
• 2006-08-16: bugfix for http:// and anchor #anchorname links.

Comments

I just applied this recipe to two imagemaps in my wiki which previously were HTML attachments to wiki pages, and after a smooth conversion I'm very happy with the results. Thank you, HansB! :-) --Henning February 23, 2006, at 11:40 AM

Hi HansB, one of my collegues was wanting to link within a page using an imagemap, but the current code places a '#' and not the tag for a link within a page. I played with the php code and replaced:

//          preg_match("/(#)(.*?)/e",$tgt,$m);  ## old - pre hack
//          if($m[1]) $LinkUrl = '#';           ## old - pre hack     

with:

        if (preg_match("/^#/",$tgt)) {      # special hack for Aya
          $LinkUrl = $tgt;                  # special hack for Aya
        }                                   # special hack for Aya

@] This works for me, but you may wish to solve it another way, of course...

I add some code for link to a email (beginning with mailto: , it seems to work for me !

	preg_match("/(mailto:)(.*?)/e",$tgt,$m);
        if($m[1]) $LinkUrl = $tgt;

After successfully using this recipe for years, visitors recently told me that Firefox has some issues with some of the links on the imagemaps. I checked how the imagemap page source validated with http://validator.w3.org/ and found the following issues:

1. no id attribute for the <map ...> tag
2. no "alt" attribute specified for the <area ..> tags
3. image map ends prematurely due my use of empty lines for formatting within the <map ...></map>

Here is a direct link for validating this page (mine is in an intranet not accessible from the outside): Validate this cookbook page

I still have to look up what the id attribute is good for, added alt attributes manually (or rather re-dedicated the title attribute I had used previously), and eliminated the empty lines manually.

Maybe it might be a good idea to generate an id attribute automatically (if possible at all), and generate a generic alt attribute (like "imagemap element") automatically as well. I've already added a warning against the use of empty lines within the area list under "notes" above so users of this recipe are made aware of this easily-avoided trap. --Henning October 17, 2008, at 11:17 AM

Style Attribute Support

Hi, I added following code to the MapArea-function allowing one to set a style. --Martin November 08, 2006, at 23:57 PM

   if (isset($arg['style']))
        $out .= " style='".$arg['style']."'";

Relative Page Names

I've modified the href code a bit to allow for relative pagename links. For example, if the current page is House.Kitchen, href=Bathroom resolves to House.Bathroom. Additionally, I tightened up the RegExs. Here's the patch against version 2006-10-28: imagemap.php-relative_href_patch.txtΔ --DanZD November 13, 2006, at 14:49 PST

See Also

Contributors

• HansB