• 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

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;

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