Printer-friendly page
Screen-friendly pageImage Links and Image Maps
Simple Image Links
Image Map: IMG and AREA elements
Source code:
<p>
<img usemap="imagemap1" src="sample-image-map.png" alt="Sample image map of mozilla products" />
</p>
<map name="imagemap1">
<p>
<area href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" alt="Mozilla website"/>
<area href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" alt="Firefox website"/>
<area href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" alt="Camino website"/>
<area href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" alt="Thunderbird website"/>
</p>
</map>
<img usemap="imagemap1" src="sample-image-map.png" alt="Sample image map of mozilla products" />
</p>
<map name="imagemap1">
<p>
<area href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" alt="Mozilla website"/>
<area href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" alt="Firefox website"/>
<area href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" alt="Camino website"/>
<area href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" alt="Thunderbird website"/>
</p>
</map>
Image Map: IMG and A elements
Source code:
<p>
<img usemap="imagemap2" src="sample-image-map.png" alt="Sample image map of mozilla products"/>
</p>
<map name="imagemap2">
<p>
<a href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" />Mozilla website</a>
<a href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" />Firefox website</a>
<a href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" />Camino website</a>
<a href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" />Thunderbird website</a>
</p>
</map>
<img usemap="imagemap2" src="sample-image-map.png" alt="Sample image map of mozilla products"/>
</p>
<map name="imagemap2">
<p>
<a href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" />Mozilla website</a>
<a href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" />Firefox website</a>
<a href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" />Camino website</a>
<a href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" />Thunderbird website</a>
</p>
</map>
Image Map: OBJECT and AREA elements
Source code:
<p>
<object usemap="imagemap3" data="sample-image-map.png" type="image/png">
Sample image map of mozilla products
</object>
</p>
<map name="imagemap3">
<p>
<area href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" alt="Mozilla website"/>
<area href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" alt="Firefox website"/>
<area href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" alt="Camino website"/>
<area href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" alt="Thunderbird website"/>
</p>
</map>
<object usemap="imagemap3" data="sample-image-map.png" type="image/png">
Sample image map of mozilla products
</object>
</p>
<map name="imagemap3">
<p>
<area href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" alt="Mozilla website"/>
<area href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" alt="Firefox website"/>
<area href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" alt="Camino website"/>
<area href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" alt="Thunderbird website"/>
</p>
</map>
Image Map: OBJECT and A elements
Source code:
<p>
<object usemap="imagemap4" data="sample-image-map.png" type="image/png">
Sample image map of mozilla products
</object>
</p>
<map name="imagemap4">
<p>
<a href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" />Mozilla website</a>
<a href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" />Firefox website</a>
<a href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" />Camino website</a>
<a href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" />Thunderbird website</a>
</p>
</map>
<object usemap="imagemap4" data="sample-image-map.png" type="image/png">
Sample image map of mozilla products
</object>
</p>
<map name="imagemap4">
<p>
<a href="http://www.mozilla.org/products/mozilla1.x/" shape="rect" coords="0,0,400,175" />Mozilla website</a>
<a href="http://www.mozilla.org/products/firefox/" shape="rect" coords="400,0,800,175" />Firefox website</a>
<a href="http://www.mozilla.org/products/camino/" shape="rect" coords="0,175,400,350" />Camino website</a>
<a href="http://www.mozilla.org/products/thunderbird/" shape="rect" coords="400,175,800,350" />Thunderbird website</a>
</p>
</map>
Image Links and Input Control
 | |