一.欢迎来到我的酒馆
你可以使用JavaScript创建客户端的image map。客户端的image map通过<img/>标签的usemap属性启用,并由特殊的<map>和<area>扩展标记定义。
通过使用<img>元素将image插入到网页中,这里可以使用额外的属性usemap。usemap的属性值是<map>元素上name属性的值,要满足该属性,前面带有井号或哈希符号。
<map>元素实际上为图像创建map,通常紧跟在<img/>元素之后。它充当实际定义可点击热点的<area>元素的容器。<map>元素仅包含一个属性,即name属性,该属性是标识map的名称。这就是<img/>元素直到要使用哪个<map>
元素的方式。
<area>元素指定定义每个可单机边界的形状和坐标。
以下代码将image map和JavaScript组合在一起,以便在鼠标移动到图像的不同部分时在文本框中生成消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function showTutorial(name){
document.myform.stage.value = name;
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="stage" size="20"/>
</form>
<img src="/images/usemap.gif" alt="HTML map" border="0" usemap="#tutorial"/>
<map name="tutorial">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href ="/perl/index.html" alt="Perl Tutorial"
target="_self"
onmouseover="showTutorial('perl')"
onmouseout="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="/html/index.html" alt="HTML tutorial"
target="_self"
onmouseover="showTutorial('html')"
onmouseout="showTutorial('')" />
<area shape="circle"
coords="73,168,32"
href="/php/index.html" alt="PHP tutorial"
target="_self"
onmouseover="showTutorial('php')"
onmouseout="showTutorial('')"/>
</map>
</body>
</html>
输出: