Sie sind auf Seite 1von 2

Aim :- Navigation on an image using client side image mapping in web page

using HTML 5.

Imagemap.html
<!Doctype html>
<html>
<head><title>Image Mapping</title></head>
<body>
<img src="Penguins.jpg" alt="Navigation Bar" usemap="#m1">
<map name="m1">
<area shape="rect" coords="421,27,611,157" href="rect.html" alt="google">
<area shape="circle" coords="132,81,82" href="circle.html" alt="circle">
<area shape="poly" coords="58,282,126,214,261,273,209,346,96,368"
href="poly.html" alt="polygon">
</map></body></html>

rect.html

<!Doctype html>
<html>
<head><title>rectangle</title></head>
<body bgcolor="cyan">
<h1>This is Rectangle</h1>
</body></html>

Circle.html

<!Doctype html>
<html>
<head><title>circle</title></head>
<body bgcolor="cyan">
<h1>This is Circle</h1>
</body></html>

Poly.html

<!Doctype html>
<html>
<head><title>polygon</title></head>
<body bgcolor="aqua">
<h1>This is Polygon</h1>
</body></html>

Das könnte Ihnen auch gefallen