HTML Image Maps

  1. Find an image to use as a clickable map
    Like this:
    Parts of a church
  2. Identify all the areas that you would like be clickable - I've highlighted them here in red:
    Parts of a church
  3. Using a tool like Basic Online Image Mapping Tool (http://www.image-maps.com/):
  4. or the Info palette in Photoshop,

    identify the coordinates of the top left and bottom right of each 'hotspot'.
  5. The Online Image Mapping Tool will automagically generate the HTML code needed.
    If you're using Photoshop, you'll need to write the map code manually.

  6. Here's what the HTML looks like:

    <p><img src="/intro2html/imagemap/church_floorplan-plain.jpg" id="church_plan" usemap="#church_plan" border="0" width="296" height="432" alt="Parts of a church" title="Parts of a church" /></p>
    <map id="church_plan" name="church_plan">
    <area shape="rect" coords="113,77,179,105" href="http://en.wikipedia.org/wiki/Chancel" alt="Chancel" title="Chancel" />
    <area shape="rect" coords="10,154,74,188" href="http://en.wikipedia.org/wiki/Transept" alt="Transept" title="Transept" />
    <area shape="rect" coords="81,150,127,173" href="http://en.wikipedia.org/wiki/Pulpit" alt="Pulpit" title="Pulpit" />
    <area shape="rect" coords="151,147,209,175" href="http://en.wikipedia.org/wiki/Lectern" alt="Lectern" title="Lectern" />
    <area shape="rect" coords="219,154,282,188" href="http://en.wikipedia.org/wiki/Transept" alt="Transept" title="Transept" />
    <area shape="rect" coords="123,278,170,302" href="http://en.wikipedia.org/wiki/Nave" alt="Nave" title="Nave" />
    <area shape="rect" coords="118,384,178,405" href="http://en.wikipedia.org/wiki/Narthex" alt="Narthex" title="Narthex" onclick="window.open(this.href,'','width=600, height=800, top=150, left=250');return false;" target="_blank" />
    </map>

  7. Here's the working clickable image map:

    Parts of a church

    Chancel Transept Pulpit Lectern Transept Nave Narthex
  8. Note - the link for the 'Narthex' uses embedded JavaScript to open a new window of a specific size at a specific location.
  9. Note - hotspots can be 'rect'angles 'circle's and 'polygon's