JavaScript DHTML/HTML/Image Map
Содержание
Assign different location href for different part of an image
<html>
<head>
<title>Navigation Bar</title>
<script type="text/javascript">
function goNext() {
var currOffset = parseInt(parent.currTitle);
if (currOffset < 5) {
currOffset += 1;
parent.entryForms.location.href = currOffset + ".htm";
parent.instructions.location.hash = currOffset;
} else {
alert("This is the last form.");
}
}
function goPrev() {
var currOffset = parseInt(parent.currTitle);
if (currOffset > 1) {
currOffset -= 1;
parent.entryForms.location.href = currOffset + ".htm";
parent.instructions.location.hash = currOffset;
} else {
alert("This is the first form.");
}
}
</script>
</head>
<body bgcolor="white">
<map name="navigation">
<area shape="rect" coords="5,80,66,116" href="javascript:goNext()">
<area shape="rect" coords="4,12,67,161" href="javascript:goPrev()">
</map>
<img src="logo.gif" height="240" width="96" border="0" usemap="#navigation" alt="navigation bar">
</body>
</html>
"coords" Example
<html>
<head>
<script language="JavaScript">
function function1() {
document.all.area1.coords = "0, 0, 100, 50";
}
function function2() {
document.all.area2.coords = "100, 0, 200, 50";
document.all.area2.noHref = "true";
}
function function3() {
document.all.area3.coords = "0, 50, 100, 100";
}
function function4() {
document.all.area4.coords = "100, 50, 200, 100";
}
function function5() {
document.getElementById("area1").coords = "0, 0, 0, 0";
document.getElementById("area2").coords = "0, 0, 0, 0";
document.getElementById("area3").coords = "0, 0, 0, 0";
document.getElementById("area4").coords = "0, 0, 0, 0";
}
</script>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png"
id="myImg"
alt="http://www.wbex.ru"
width="200"
height="100"
usemap="#myMap">
<map name="myMap">
<area id="area1"
shape="rect"
href="http://www.wbex.ru"
alt="wbex.ru"
onClick="return false">
<area id="area2"
shape="rect"
href="http://www.wbex.ru" nohref="true"
alt="wbex.ru home page"
onClick="return false">
<area id="area3"
shape="rect"
href="http://www.wbex.ru"
alt="wbex home page"
onClick="return false">
<area id="area4"
shape="rect"
href="http://www.wbex.ru"
alt="wbex.ru"
onClick="return false">
</map>
<br>
<input type="button" value="Make area 1 active" onClick="function1();">
<input type="button" value="Make area 2 active" onClick="function2();">
<input type="button" value="Make area 3 active" onClick="function3();">
<input type="button" value="Make area 4 active" onClick="function4();">
<button onclick="function5();">Restore areas to inactive</button>
<button onclick="alert(myImg.isMap);">IS MAP</button>
<button onclick="alert(area2.noHref);">noHref for Area 2</button>
</body>
</html>
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.wbex.ru/style/logo.png" BORDER="0" USEMAP="#bizmap">
</HTML>
Image Map Event Handling
<HTML>
<HEAD>
<TITLE>Image Map Event Handling</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
firstTimeOnHead = true
function onHead() {
if(firstTimeOnHead) {
alert("You"re on my head!")
firstTimeOnHead=false
}
}
function myEye() {
alert("myEye!")
}
function myNose() {
alert("myNose")
}
function myMouth() {
alert("myMouth!")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Image Map Event Handling</H1>
<IMG SRC="http://www.wbex.ru/style/logo.png" USEMAP="#blockman">
<MAP NAME="blockman">
<AREA COORDS="80,88,120,125" HREF="A.htm" onMouseOver="myEye()">
<AREA COORDS="169,88,208,125" HREF="B.htm" onMouseOver="myEye()">
<AREA COORDS="124,147,165,181" HREF="C.htm" onMouseOut="myNose()">
<AREA COORDS="92,210,192,228" HREF="D.htm" onMouseOut="myMouth()">
<AREA COORDS="6,4,292,266" HREF="E.htm" onMouseOver="onHead()">
</MAP>
</BODY>
</HTML>
Image map shape
<html>
<head>
<script language="JavaScript">
function function1() {
document.all.area1.coords = "0, 0, 100, 50";
}
function function2() {
document.all.area2.coords = "100, 0, 200, 50";
document.all.area2.noHref = "true";
}
function function3() {
document.all.area3.coords = "0, 50, 100, 100";
}
function function4() {
document.all.area4.coords = "100, 50, 200, 100";
}
function function5() {
document.getElementById("area1").coords = "0, 0, 0, 0";
document.getElementById("area2").coords = "0, 0, 0, 0";
document.getElementById("area3").coords = "0, 0, 0, 0";
document.getElementById("area4").coords = "0, 0, 0, 0";
}
</script>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" id="myImg" alt="" width="200" height="100" usemap="#myMap2">
<map name="myMap2">
<area id="area1"
shape="rect"
href="http://www.wbex.ru"
alt="wbex.ru"
onClick="return false">
<area id="area2"
shape="rect"
href="http://www.wbex.ru" nohref="true"
alt="wbex.ru home page"
onClick="return false">
<area id="area3"
shape="rect"
href="http://www.wbex.ru"
alt="wbex home page"
onClick="return false">
<area id="area4"
shape="rect"
href="http://www.wbex.ru"
alt="wbex.ru"
onClick="return false">
</map>
<br>
<input type="button" value="Make area 1 active" onClick="function1();">
<input type="button" value="Make area 2 active" onClick="function2();">
<input type="button" value="Make area 3 active" onClick="function3();">
<input type="button" value="Make area 4 active" onClick="function4();">
<button onclick="function5();">Restore areas to inactive</button>
<button onclick="alert(myImg.isMap);">IS MAP</button>
<button onclick="alert(area2.noHref);">noHref for Area 2</button>
</body>
</html>
isMap and useMap Example
<html>
<head>
<script language="JavaScript">
function function1() {
document.all.area1.coords = "0, 0, 100, 50";
}
function function2() {
document.all.area2.coords = "100, 0, 200, 50";
document.all.area2.noHref = "true";
}
function function3() {
document.all.area3.coords = "0, 50, 100, 100";
}
function function4() {
document.all.area4.coords = "100, 50, 200, 100";
}
function function5() {
document.getElementById("area1").coords = "0, 0, 0, 0";
document.getElementById("area2").coords = "0, 0, 0, 0";
document.getElementById("area3").coords = "0, 0, 0, 0";
document.getElementById("area4").coords = "0, 0, 0, 0";
}
</script>
</head>
<body>
<img src="yourimage.gif" id="myImg" alt="" width="200" height="100" usemap="#myMap2">
<map name="myMap2">
<area id="area1"
shape="rect"
href="http://www.wbex.ru"
alt="wbex.ru"
onClick="return false">
<area id="area2"
shape="rect"
href="http://www.wbex.ru" nohref="true"
alt="wbex.ru home page"
onClick="return false">
<area id="area3"
shape="rect"
href="http://www.wbex.ru"
alt="wbex home page"
onClick="return false">
<area id="area4"
shape="rect"
href="http://www.wbex.ru"
alt="wbex.ru"
onClick="return false">
</map>
<br>
<input type="button" value="Make area 1 active" onClick="function1();">
<input type="button" value="Make area 2 active" onClick="function2();">
<input type="button" value="Make area 3 active" onClick="function3();">
<input type="button" value="Make area 4 active" onClick="function4();">
<button onclick="function5();">Restore areas to inactive</button>
<button onclick="alert(myImg.isMap);">IS MAP</button>
<button onclick="alert(area2.noHref);">noHref for Area 2</button>
</body>
</html>
Methods and Properties of the Area Object
/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke
ISBN: 067231763X
Publisher Sams CopyRight 2000
+---------+----------------+-------------------------------------------------+
Type Item Description
+---------+----------------+-------------------------------------------------+
Method
+---------+----------------+-------------------------------------------------+
handleEvent() Calls the event handler associated with this event.
+---------+----------------+-------------------------------------------------+
Property
+---------+----------------+-------------------------------------------------+
hash The portion of the URL that is the anchor,
including the # symbol.
+---------+----------------+-------------------------------------------------+
host The hostname (IP address) and port specified in the URL.
+---------+----------------+-------------------------------------------------+
hostname The hostname specified within the URL.
+---------+----------------+-------------------------------------------------+
href The entire URL.
+---------+----------------+-------------------------------------------------+
pathname The path of the file specified in the URL, beginning
with the / symbol.
+---------+----------------+-------------------------------------------------+
port The port specified in the URL.
+---------+----------------+-------------------------------------------------+
protocol The protocol specified in the URL, including the ending
colon (:).
+---------+----------------+-------------------------------------------------+
search The search part of the URL, including the beginning
question mark (?).
+---------+----------------+-------------------------------------------------+
target The name of the target window in which the URL should
be displayed.
+---------+----------------+-------------------------------------------------+
text The text that appears between the <area> and </area> tags.
+---------+----------------+-------------------------------------------------+
x The x-coordinate of the area.
+---------+----------------+-------------------------------------------------+
y The y-coordinate of the area.
+---------+----------------+-------------------------------------------------+
"noHref" Example
<html>
<head>
<script language="JavaScript">
function function11() {
document.all.area1.coords = "0, 0, 100, 50";
}
function function12() {
document.all.area2.coords = "100, 0, 200, 50";
document.all.area2.noHref = "true";
}
function function13() {
document.all.area3.coords = "0, 50, 100, 100";
}
function function14() {
document.all.area4.coords = "100, 50, 200, 100";
}
function function15() {
document.getElementById("area1").coords = "0, 0, 0, 0";
document.getElementById("area2").coords = "0, 0, 0, 0";
document.getElementById("area3").coords = "0, 0, 0, 0";
document.getElementById("area4").coords = "0, 0, 0, 0";
}
</script>
</head>
<body>
<img src="yourimage.gif" id="myImg" alt="" width="200" height="100" usemap="#myMap2">
<map name="myMap2">
<area id="area1"
shape="rect"
href="http://www.wbex.ru"
alt="wbex.ru"
onClick="return false">
<area id="area2"
shape="rect"
href="http://www.wbex.ru" nohref="true"
alt="wbex.ru home page"
onClick="return false">
<area id="area3"
shape="rect"
href="http://www.wbex.ru"
alt="wbex home page"
onClick="return false">
<area id="area4"
shape="rect"
href="http://www.wbex.ru"
alt="wbex.ru"
onClick="return false">
</map>
<br>
<input type="button" value="Make area 1 active" onClick="function11();">
<input type="button" value="Make area 2 active" onClick="function12();">
<input type="button" value="Make area 3 active" onClick="function13();">
<input type="button" value="Make area 4 active" onClick="function14();">
<button onclick="function15();">Restore areas to inactive</button>
<button onclick="alert(myImg.isMap);">IS MAP</button>
<button onclick="alert(area2.noHref);">noHref for Area 2</button>
</body>
</html>