HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML imagemaps

Images are used as graphical content on webpages, and an image can also link to a document or another resource. But what if you can use one image to link to many different docments and/or resources?

This tutorial focuses on:

What is an imagemap?

You can set an image to be a link, but what if you can set an image to be multiple links?

An imagemap is an HTML concept which enables you to turn one image into many different links. Each area of the image, specified by a set of coordinates, will be a different link.

The <map> tag

The <map> tag is used to declare the actual image map. This tag contains an name or id attribute which specifies a unique name for the image map.

NOTE: You can also use the name attribute at the same time as the id attribute and give them both the same value. Some browsers read the name attribute, while others read the id attribute, so it is better to use both for browser compatibility.

Example:
<map id="animalmap" name="animalmap"> </map>

The <area> tag

The <map> tag by itself only declares an image map, it does not define sets of coordinates for different links. This task is achieved through the use of the <area> tag.

NOTE: The <area> tag has no end tag

NOTE: The <area> tag goes inside the <map> tag

Attributes of the <area> tag:
Example:
<map> <area shape="rect" coords="0, 0, 100, 60" href="http://allaboutfrogs.org/" target="_blank" alt="Learn about frogs" /> <area shape="circle" coords="145, 25, 50" href="http://fins.actwin.com/" target="_blank" alt="Learn about fish" /> <area shape="poly" coords="210, 30, 230, 5, 260, 30, 240, 60" href="http://cats.about.com/" target="_blank" alt="Learn about cats" /> </map>

Associating an image with an image map

To associate an image with an image map, include the usemap attribute in the <img> tag of the image you want to become an image map. It should be set with a pound sign ( # ) followed by the name of the imagemap definition to be used (should be same value as that set for the name attribute in the <map> tag). This will create a relationship between an image and the map.

Example:
<img src="animals.jpg" usemap="#animalmap" />

An entire imagemap

The entire code for an imagemap definition:
<map name="animalmap"> <area shape="rect" coords="0, 0, 100, 60" href="http://allaboutfrogs.org/" target="_blank" alt="Learn about frogs" /> <area shape="circle" coords="145, 25, 50" href="http://fins.actwin.com/" target="_blank" alt="Learn about fish" /> <area shape="poly" coords="210, 30, 230, 5, 260, 30, 240, 60" href="http://cats.about.com/" target="_blank" alt="Learn about cats"> </map />
The code for the image that uses the image map:
<img src="animals.jpg" usemap="#animalmap" />
Learn about frogs Learn about fish Learn about cats
The completed image map:
Animals

Each animal in the image is now a separate link to a different page. Click on any of the animals to read some information about it.

The imagemap is a relatively complex thing. Unlike pieces of text, links, or images, it is an entire structure. Study the example and concepts presented in this tutorial and familiarize yourself with imagemaps.

Remember this outline when you are creating an imagemap:

  1. Put the image on the page
  2. Declare an imagemap with the <map> tag and give it a unique ID ( the id attribute) AND name (the name attribute) for browser compatibility.
  3. Decide how many links the imagemap will contain as well as the shapes and coordinates for the different links
  4. Once you have that figured out, plot this data using the <area> tag
  5. Associate the image with the imagemap using the usemap attribute in the <img> tag
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information