我想做一个简单的客户端图像映射示例。但这没有成功。
仅在浏览器上输出:Clicked Item:
代码看起来不错。但仍然无法正常工作。为什么呢?
代码:
<html>
<head>
<title>Client-Side Image Map Example</title>
<script>
function update(t) {
document.form1.text1.value = t;
}
</script>
</head>
<body>
<map name="map1">
<area shape=rect coords="14,15,151,87" onClick="javascript:update('Servis');"
onMouseOver="window.status='Servise department'; return true;">
<area shape=rect coords="162, 16, 283, 85" onClick="javascript:update('Shop');"
onMouseOver="window.status='Sales department'; return true;">
<area shape=rect coords="294, 15, 388, 87" onClick="javascript:update('About as');"
onMouseOver="window.status='About as'; return true;">
<area shape=rect coords="13, 98, 79, 178" onClick="javascript:update('Email');"
onMouseOver="window.status='Write to as'; return true;">
<area shape=rect coords="92, 97, 223, 117" onClick="javascript:update('Goods');"
onMouseOver="window.status='Goods & service'; return true;">
<area shape=rect coords="235, 98, 388, 177" onClick="javascript:update('History');"
onMouseOver="window.status='History'; return true;">
<area shape=default onClick="javascript:update('No item selected.');"
onMouseOver="window.status='Please select an item.>
</map>
<h1>Client-Side Image Map Example</h1>
<hr>
The image map below uses JavaScript functions in each of its areas. Moving over
an area will display information about it in the status line. Clicking on an area
places the name of the area in the text field below the image map.
<hr>
<image src="imagemap.qif" usemap="#map1">
<hr>
<form name="form1">
<b>Clicked Item:</b>
<hr>
<input type="text" name="text1" value="Please select an item.">
</form>
<hr>
</body>
</html>
问题:
答案 0 :(得分:-1)
我修复了你的代码:
<html>
<head>
<title>Image Map Example</title>
<script LANGUAGE="JavaScript">
function update(t) {
document.form1.text1.value = t;
}
</script>
</head>
<body>
<map NAME="map1">
<area SHAPE=RECT COORDS="14,15,151,87" onClick="update('service');"
onMouseOver="window.status='Service Department'; return true;">
<area SHAPE=RECT COORDS="162,16,283,85" onClick="update('sales');"
onMouseOver="window.status='Sales Department'; return true;">
<area SHAPE=RECT COORDS="294,15,388,87" onClick="update('info');"
onMouseOver="window.status='Information'; return true;">
<area SHAPE=RECT COORDS="13,98,79,178" onClick="update('email');"
onMouseOver="window.status='Email Us'; return true;">
<area SHAPE=RECT COORDS="92,97,223,177" onClick="update('products');"
onMouseOver="window.status='Products'; return true;">
<area SHAPE=RECT COORDS="235,98,388,177" onClick="update('our staff');"
onMouseOver="window.status='Our Staff'; return true;">
<area SHAPE=default onClick="update('No item selected.');"
onMouseOver="window.status='Please select an item.'; return true;">
</map>
<h1>Client-Side Image Map Example</h1>
<hr>
The image map below uses JavaScript functions in each of its areas. Moving over
an area will display information about it in the status line. Clicking on an area
places the name of the area in the text field below the image map.
<hr>
img SRC="imagemap.gif" USEMAP="#map1">
<hr>
<FORM NAME="form1">
<b>Clicked Item:</b>
<input TYPE="text" NAME="text1" VALUE="Please select an item.">
</form>
<hr>
</body>
</html>