Home > HTML > How To Create An Image Map Using html

How To Create An Image Map Using html

An image map is a picture in which areas within the picture are links. Creating an image involves using the

<IMG ...>, <MAP ...>, and <AREA ...> tags. Suppose we want to make an image map using this image:

To make this image into an image map, we use this code:

<map name=”TopNavigaton”>
<area shape=”rect” coords=”550,45,605,60″ href=”‘.$invoice_url.'” alt=”Click Here” />
<area shape=”rect” coords=”820,10,900,33″ href=”‘.$url_path.’28” alt=”Green” />
<area shape=”rect” coords=”730,10,800,33″ href=”‘.$url_path.’3″ alt=”Porcelain” />
<area shape=”rect” coords=”635,10,700,33″ href=”‘.$url_path.’2″ alt=”Mosaics” />
<area shape=”rect” coords=”550,10,600,33″ href=”‘.$url_path.’11” alt=”Glass” />
<area shape=”rect” coords=”470,10,520,33″ href=”‘.$url_path.’6″ alt=”Quarry Tile” />
<area shape=”rect” coords=”390,10,445,33″ href=”‘.$url_path.’13” alt=”Pebbles” />
<area shape=”rect” coords=”240,10,340,33″ href=”‘.$url_path.’17” alt=”Natural Stone” />
<area shape=”rect” coords=”160,10,225,33″ href=”‘.$url_path.’5″ alt=”Metal” />
<area shape=”rect” coords=”80,10,145,33″ href=”‘.$url_path.’4″ alt=”Ceramic” />
</map>

Advertisements
Categories: HTML Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: