我尝试做客户端图像映射的简单示例。但这并没有成功。
仅在浏览器输出: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>
问题:
- 如何解决这个问题？
最佳答案
我修正了你的代码。有一些问题: - 缺少一个区域的返回声明 - 缺少脚本标签的语言注释 - 一般格式
这是一个固定的代码:
<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>
关于javascript - 客户端图像映射示例 - 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15875149/