Wiki Tut Image Map

How can I put an image into a wiki page so that people can click on parts of the image to go to different pages?

A simple way is to use the Draw Plugin. It has a simple drawing editor with boxes and lines and can create simple image maps.

Alternatively, you can create the image in another program and use standard HTML image map syntax inside the Wiki page.
  • Be sure to attach the image to the page where you want the map, and check the box to "Create a Link to the attached File."
  • Be sure to add a usemap parameter to the <img... tag
  • Be sure to set the href parameters in the map so something happens when the user clicks!

Example

Code

<map name="CPG-structure">
<area shape="rect" coords="425,8,569,56" href="#" alt="Content" title="Content">
<area shape="rect" coords="645,13,887,87" href="#" alt="Open and Social" title="Open and Social">
<area shape="rect" coords="697,99,894,148" href="#" alt=" User Interface" title="User Interface">
<area shape="rect" coords="645,161,878,223" href="#" alt="Data Analytics" title="Data Analytics">
<area shape="rect" coords="462,190,631,230" href="#" alt="Membership" title="Membership">
<area shape="rect" coords="201,176,433,228" href="#" alt="Video" title="Video">
<area shape="rect" coords="9,143,182,194" href="#" alt="Mobile" title="Mobile">
<area shape="rect" coords="26,70,257,129" href="#" alt="Globalization" title="Globalization">
<area shape="rect" coords="26,4,303,62" href="#" alt="Local / Geo" title="Local / Geo">
</map>

<img  src="%ATTACHURLPATH%/CPG-structure.png" alt="CPG-structure.png" width="900" height="230" usemap="#CPG-structure" border="0">

Try it

Float the cursor over various parts of the image below...

Content Open and Social User Interface Data Analytics Membership Video Mobile Globalization Local / Geo

CPG-structure.png

How Do I Build the Map?

There are many free and commercial programs available that will produce image maps.

On Windows, you can use Visio, ImageMapper, or Paint.NET.

On Mac OS X, try YokMaps or MapSpinner.

-- VickiBrown -- 24 Mar 2011
Topic revision: r2 - 02 Dec 2014, VickiBrown
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email