html 锚点链接 图像热区链接
锚点链接
<a name="#d"></a>
<a href="#d">点击</a>
图像热区链接
除了对整幅图像设置超链接外,还可以将图像划分为若干区域,这叫做"热区",每个区域可设置不同的超链接。此时,包含热区的图像可以称为映射图像。
要进行热区设置,首先需要在图像文件中设置映射图像名,格式为:
<img src = 图像文件地址 usemap = 映射图像名称>
也就是说,此时需要使用<img>标记的usemap属性,定义图像的映射图像名。
然后,就要在图像中定义各个热区以及超链接了,主要语法为:
<map name = 映射图像名称>
<area shape = 热区形状1 coords = 热区坐标1 href = 链接地址1>
<area shape = 热区形状2 coords = 热区坐标2 href = 链接地址2>
……
<area shape = 热区形状n coords = 热区坐标n href = 链接地址n>
</map>
在该语法中又引入了两个标记:<map>和<area>。<map>、</map>标记用于包含多个<area>标记,其中的"映射图像名称"就是在<img>标记中定义的名称。<area>标记则用于定义各个热区和超链接,它有两个重要属性:
(1)shape属性:用来定义热区形状,它有三个值:
● default:默认值,为整幅图像。
● rect:矩形区域。
● circle:圆形区域。
● poly:多边形区域。
(2)coords属性:用来定义矩形、圆形或多边形区域的坐标。它的格式如下:
● 如果shape = "rect",则coords包含四个参数,分别为left、top、right和bottom,也可以将这四个参数看成矩形左上角和右下角顶点的坐标。
● 如果shape = "circle",则coords包含三个参数,分别为center-x、center-y和radius,这三个参数是圆心坐标和圆的半径。
● 如果shape = "poly",则coords需要按顺序取多边形各个顶点的(x、y)坐标值,因此形式为"x1, y1, x2, y2, …… xn, yn"。可以是逆时针,也可以是顺时针。HTML会按照定义顶点的顺序将它们链接起来,形成多边形热区。
如果要定义的热区形状复杂,都可以用多边形热区来逼近,所以如果shape = "poly",则coords可能包含很多坐标值,其数量必须是偶数。
图像的左上角坐标是(0, 0),x轴向右、y轴向下为正。
【例7】修改例6,改为chap7_7.html,给图像定义热区并加超链接。
<html>
<head>
<title>itsway -- 图像</title>
</head>
<body>
<center><img src = "taihu.gif" usemap = "taihu" border = "0"><center>
<map name = "taihu">
<area shape="rect" coords="223,20,241,38" href="chap7_7meiyuan.html" target="_blank" alt="梅园">
<area shape="circle" coords="234,53,7" href="chap7_7yuantouzhu.html" target="_blank" alt="鼋头渚">
<area shape="poly" coords = "226, 228, 243, 219, 256, 207, 271, 217, 275, 225, 265, 229, 265, 232, 255, 250, 244, 253, 227, 239" href="chap7_7piaomiaofeng.html" target="_blank" alt="缥缈峰">
</map>
</body>
</html>
在图中请注意,当鼠标移到热点区域时,鼠标会变成手的形状,此时单击鼠标,就会打开相应的网页。“鼋头渚”念“原头煮”,是无锡太湖的一处名胜,呵呵。
在chap7_7.html中链接了几个网页,它们可以简单写写。例如,chap7_7meiyuan.html代码如下。
<html>
<head>
<title>itsway -- 图像</title>
</head>
<body>
<p> 无锡梅园横山风景区南临太湖,北倚龙山,成为集自然景观、人文古迹、名花异卉、园林建筑及休闲健身于一体的著名旅游胜地。"四面有山皆入画,一年无日不看花"。</p>
</body>
</html>
chap7_7yuantouzhu.html代码如下:
<html>
<head>
<title>itsway -- 图像</title>
</head>
<body>
<p> 鼋头渚是无锡第一胜景、太湖佳绝处,独占太湖风景最美一角,山清水秀。郭沫若吟道:"太湖佳绝处,毕竟在鼋头"。鼋头渚的特点是以太湖风景为主,人工修饰为辅,依山傍湖,别具情趣,是观赏太湖的理想所在。</p>
</body>
</html>
chap7_7piaomiaofeng.html代码如下:
<html>
<head>
<title>itsway -- 图像</title>
</head>
<body>
<p> 太湖西山缥缈峰,海拔337米,为太湖七十二峰之首,水的精华所在。太湖风云多变,山峰常隐于云雾之中,缥缥缈缈,似仙山隔云海,如霞岭玉带连,有"缥缈晴峦"景观,为西山八大胜景之一。</p>
</body>
</html>
===============
area中有重要的几个属性:
coords 这个是要选中的地区里面有圆、矩形、多边形
href 跳转的地址、锚点
tip:可以通过DW中有热点选择的功能,还算方便,省去了坐标的问题
===============map热区自适应图片大小
https://blog.csdn.net/qq_41226196/article/details/109218971 参照地址
<script src="jquery.imgMap.min.js"></script>
<p>
<img src="tupian.jpg" style="width:100%" alt="" usemap="#map1"/>
<map name="map1">
<area shape="rect" coords="38, 31, 269, 226" href="https://www.v2ex.com/t/194813"/> </map>
</p>
<script>$(document).ready(function(e) { $('img[usemap]').rwdImageMaps();});</script>
下面附上jquery.imgMap.min.js:
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
dw 下载