Creating the Image Map : Image Map « HTML « JavaScript DHTML






  1. JavaScript DHTML
  2. HTML
  3. Image Map

Creating the Image Map

 

<HTML>
<HEAD>
<TITLE>Client-Side Image Maps</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function goWhatsNew() {
 parent.frames[1].location.href="A.htm"
}
function goProducts() {
 parent.frames[1].location.href="B.htm"
}
function goCompany() {
 parent.frames[1].location.href="C.htm"
}
function goField() {
 parent.frames[1].location.href="D.htm"
}
// --></SCRIPT>
</HEAD>
<BODY>
<MAP NAME="bizmap">
  <AREA NAME="whatsNew" COORDS="219,250,50" shape="circle" HREF="javascript:void(0)" onMouseOver="goWhatsNew();return true">
  <AREA NAME="products" COORDS="205,226,100" shape="circle" HREF="javascript:void(0)" onMouseOver="goProducts(); return true">
  <AREA NAME="company" COORDS="192,202,155" shape="circle" HREF="javascript:void(0)" onMouseOver="goCompany()">
  <AREA NAME="field" COORDS="183,189,188" shape="circle" HREF="javascript:void(0)" onMouseOver="goField()">
</MAP>
<IMG SRC="http://www.java2s.com/style/logo.png" BORDER="0" USEMAP="#bizmap">
</HTML>








Related examples in the same category

1.Image map shape
2.'coords' Example
3.'noHref' Example
4.isMap and useMap Example
5. Image Map Event Handling
6.Methods and Properties of the Area Object
7.Assign different location href for different part of an image