html —— map元素与area元素制作图像映射

图像映射适合于一幅图像的某(或几)个区域点击后跳转到另一(或多)个页面的情况,见于某些网站首页等。

W3School示例:

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

步骤:

1、确定一幅要做映射的图像,以及某些映射区域与形状;

2、通过map与area元素定义链接与区域的映射关系,并给map一个name与id(两个都需要,浏览器可能有差异);

3、图像通过usemap属性绑定map元素。


涉及到的3个新属性:image标签的usemap属性、area标签的shape、coords属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值