html 锚点链接 图像热区链接

锚点链接

       点击

图像热区链接

       除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做"热区"，每个区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。要进行热区设置，首先需要在图像文件中设置映射图像名，格式为：

       也就是说，此时需要使用标记的usemap属性，定义图像的映射图像名。　    然后，就要在图像中定义各个热区以及超链接了，主要语法为：

                                             ……                  

       在该语法中又引入了两个标记：和。、标记用于包含多个标记，其中的"映射图像名称"就是在标记中定义的名称。标记则用于定义各个热区和超链接，它有两个重要属性：　　（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，给图像定义热区并加超链接。

        itsway -- 图像                                     

在图中请注意，当鼠标移到热点区域时，鼠标会变成手的形状，此时单击鼠标，就会打开相应的网页。“鼋头渚”念“原头煮”，是无锡太湖的一处名胜，呵呵。　　在chap7_7.html中链接了几个网页，它们可以简单写写。例如，chap7_7meiyuan.html代码如下。

        itsway -- 图像       

无锡梅园横山风景区南临太湖，北倚龙山，成为集自然景观、人文古迹、名花异卉、园林建筑及休闲健身于一体的著名旅游胜地。"四面有山皆入画，一年无日不看花"。

chap7_7yuantouzhu.html代码如下：

        itsway -- 图像       

  鼋头渚是无锡第一胜景、太湖佳绝处，独占太湖风景最美一角，山清水秀。郭沫若吟道："太湖佳绝处，毕竟在鼋头"。鼋头渚的特点是以太湖风景为主，人工修饰为辅，依山傍湖，别具情趣，是观赏太湖的理想所在。

chap7_7piaomiaofeng.html代码如下：

        itsway -- 图像       

  太湖西山缥缈峰，海拔337米，为太湖七十二峰之首，水的精华所在。太湖风云多变，山峰常隐于云雾之中，缥缥缈缈，似仙山隔云海，如霞岭玉带连，有"缥缈晴峦"景观，为西山八大胜景之一。

===============

area中有重要的几个属性：

coords 这个是要选中的地区里面有圆、矩形、多边形

href 跳转的地址、锚点

tip：可以通过DW中有热点选择的功能，还算方便，省去了坐标的问题

===============map热区自适应图片大小

 https://blog.csdn.net/qq_41226196/article/details/109218971  参照地址

下面附上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("").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