博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML <map>标签的使用
阅读量:6872 次
发布时间:2019-06-26

本文共 855 字,大约阅读时间需要 2 分钟。

在html代码中,给图像使用<map>标签,可以给图像的某个部分建立超链接,方法如下:
<img src="img.gif" usemap="map-name">
<map name="map-name">
    <area shape="rect|circle|poly" coords="#" href="url">
</map>
 
其中,坐标coords对各个shape的解释如下:
1、shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right
    即,当shape是矩形时,coords表示矩形左上及右下(x2, y2)的坐标
2、shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius
    即,当shape是圆形时,coords表示圆中心点坐标(x, y)及半径
3、shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...
    即,当shape是poly多边形时,coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...
 
注意:以上所有坐标都是相对于图形img.gif左上角位置而言的
 
以下是一个例子:
<img src="mapimg.gif" usemap="#Face">
<map name="Face">
   <area shape="rect" href="page.html" coords="140,20,280,60">
   <area shape="poly" href="image.html" coords="100,100,180,80,200,140">
   <area shape="circle" href="new.html" coords="80,100,60">
</map>

转载地址:http://egofl.baihongyu.com/

你可能感兴趣的文章
JQuery Ajax 的简单使用
查看>>
Codeforces Round #287 (Div. 2) ABCDE
查看>>
【转载】读懂IL代码就这么简单(二)
查看>>
09-JS的事件流的概念(重点)
查看>>
有关inline-block
查看>>
文献随笔(九)
查看>>
git相关
查看>>
加入大型的js文件如jQuery文件,Eclipse会报错
查看>>
POJ 2763 (树链剖分+边修改+边查询)
查看>>
全局变量---只创建一次
查看>>
IOS APP上下黑边问题
查看>>
数位dp题集
查看>>
C# 汉字转拼音
查看>>
jquery实现复制的两种方式
查看>>
Django分页(一)
查看>>
Balance Adjustment页面调整无法保存的问题
查看>>
De Moivre–Laplace theorem
查看>>
symfony2使用form指定的checkbox,设置其属性disabled
查看>>
linux操作之软件安装(一)
查看>>
react 使用 lazyload 懒加载图片
查看>>