HTML学习记录<四> :创建图像映射

学习网站: http://www.w3school.com.cn/html/index.asp

先看如何将图像作为一个链接使用:

<html>
<body>
<a href = " http://www.w3school.com.cn/html/index.asp"> 
    <img src = "http://m2.biz.itc.cn/pic/new/n/49/72/Img7927249_n.jpg"> 
</a>
</body>
</html>


第二个例子显示如何创建带有可供点击区域的图像地图,其中的每个区域都是一个超级链接:


<span style="font-size:18px;"><html>
<meta charset="utf-8">
<body>
<p>点击太阳或其他行星,注意变化:</p>
<img src="/demo/planets.gif" width="145" height="126" alt="Planets" 
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html></span>

这段代码将图像 planets.gif 映射为 3 个区域,当用户单击其中某一个区域时,将被链接到不同的文档中。点击左边的矩形区域会链接到太阳sun的图片,点水星(Mercur)和金星(Venus)的圆形区域也会分别链接到各自的图片。

HTML学习记录<四> :创建图像映射_第1张图片


HTML <img> 标签的 usemap 属性

usemap 属性将图像定义为客户端图像映射,图像映射指的是带有可点击区域的图像。

你可能感兴趣的:(html,创建图像映射,html图片链接)