Image Map

Google Sites Examples

Goopal

Add to your Google Plus

Google Sites Examples for Mobile

Google Sites HTML‎ > ‎

Static Map [Google Maps]

Image Map - A Single Image with multiple links.

An Image map is a single image with multiple linking regions, like the following example:

Mouseover the Logo Image to see the image maps G map, O map and the P map.

*Update

Embed the following code in <embed> ... </embed> tags.

<img src="http://www.goopal.org/goopal.gif" usemap="#map1">

<map name="map1">
<area title="G Map" shape="rect" coords="0,0,65,65" href="#" >
<area title="1st O Map" shape="circle" coords="90,45,20" href="#" />
<area title="P Map" shape="poly" coords="170,25,220,25,170,93" href="#" />
</map>

There are 3 standard shapes for an Image Map.

Rectangle:

(Over "G")
shape="rect" 
coords="0,0,65,65"
title="G Map"


(x,y,x,y,)

Circle:

(Over the green "O")

shape="circle"
coords="90,45,20"
title="1st O Map"


(x,y,radius)

Polygon:

(Over the "P")

shape="poly" 
coords="170,25,220,25,170,93"
title="P Map"


(x,y,x,y,x,y)

Live Html Editor [Larger View]

Test your Image Map here:

Check Image Map with Firebug for Firefox

Google Docs (Drawing tool)

Image Icons (From a Single Image)

Live Html Editor

Try editing the HTML below: