图片可以设置多个热点但不可以添加文本热点到图片中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片可以设置多个热点但不可以添加文本热点到图片中相关的知识，希望对你有一定的参考价值。
图片可以设置多个热点但不可以添加文本热点到图片中您可以添加文本热点到图形如图片、动态GIF和视频中。文本热点是已经放在图形并分配了超链接的文本字符串。当站点访问者单击该文本时超链接的目的地会显示在Web浏览器上。1、在网页视图模式下单击图片。
2、在“图片”工具栏上如图1所示单击“文本” 。
图1
3、在显示在图片上的文本框内键入文本。
您可以
通过单击和拖动控点来调整文本框大小。
通过单击和拖动边框来移动文本框。
4、要设置文本的超链接可双击文本框边缘。
5、指定热点的目的地
若目的地在站点上则浏览到包含网页的站点和文件夹选定后单击“确定” 。若目的地在您的局域网上则单击“制作一个指向您计算机上文件的超链接” 从局域网上浏览到想要的网页然后单击“确定” 。
若目的地在全球广域网上则单击“使用Web浏览器来选择网页或文件” 。在您的Web浏览器中浏览到想要的网页然后单击ALT+TAB切换回到MicrosoftFrontPage。您已访问过的网页位置将会显示在“URL”框中。单击“确定” 。若您想要在站点用户单击图形时创建电子邮件消息则单击“制作发送电子邮件的超链接” 。键入想要消息送达的电子邮件地址然后单击“确定” 参考技术A 二、插入图片： 打开Dreamweaver，新建一个网页，将图片插入到页面中。
三、找到地图工具： 单击鼠标左键点击图片，这时候软件下方的属性面板就会变成和图片相关的属性，注意看左下角部分一中的红色框内。 注：如果没有上图显示的热点地图工具，是地图工具属性隐藏了，可以点击属性面板右侧的三角符号打开四、绘制热点： 注意方块、圆形、多边形三个小图标，它们就是我们要用的“图片热点”工具，不同的热点工具可以绘制出不同形状的热点区域。 先点击方块按钮，将鼠标移动到图片上，这时候鼠标就变成了十字，在你想加链接的地方画一个方块。添加热点后的图片区域会出现一个浅蓝色蒙版，意味着该区域已经添加了热点。依次添加其他区域的热点。
五、给热点添加链接： 热点区域画好后，下面的属性面板就会变成该热点区域的属性“链接”就是点击此处跳转的链接地址；“目标”就是点击此处时窗口的打开方式；“替换”就是鼠标悬浮在该区域时提示的文字。一般使用"_blank"，指超链接将在新窗口打开。注：可以采用画一个区域，添加对应的连接，也可以依次把所有的区域热点画完，然后点击热点区域，依次添加对应的连接。初学者建议一个一个的添加。六、修改热点：对热点区域进行拖动或者局部调整 如果需要修改热点区域，或者需要进行微调，如中国地图添加热点，不可能把所有的热点区域都做到刚好覆盖对应的区域，那就需要对已经添加热点的区域进行调整。 点击热点区域，热点区域四周会出现浅蓝色的点。光标放在浅蓝色的点，点击鼠标左键，即可调整热点区域的大小。
七、对个图片添加热点： 如果一个页面中有多个图片需要添加热点，那么久需要给每一张图片对应的热点设置不同的热点名称，地图（M）处的文本框中的字符就是当前热点的名称。 可以使用map1、map2、map3。。。也可以使用不同图片的内容对热点进行命名，如top_map,foot_map,act_map。。。总之，不同图片的热点名称不同即可。
八、热点的原理 图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上。 热点添加完毕后，查看页面源代码，你会发现在代码最底下多出几行内容，这些就是热点生成的：
一般来说，图片的usermap属性对应的是map热点的name的属性值。所以如果页面中如果有多个图片添加 参考技术B 不可以。图片可以设置多个热点，但是不能添加文本热点到图片中，因为文本热点需要用文字和html代码来实现，而图片不能支持这些格式。
如何为图片添加热点链接？
所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面。简单来说就是点击某一区域就能跳转到相应的页面，而无需点击整个图片才能跳转。
说到图片热点链接，我首先想到了map + area，当然了，可能还有其他方法也能实现。
以前只是知道有这个功能，但是具体如何实现却没有去真正的了解。由于工作需要，今天稍微了解了下，发现这个功能其实蛮实用的，尤其是在网页banner广告位中想实现点击指定区域或链接以实现跳转是非常有用的。
首先说下map，map的作用是定义一个图像映射。所谓图像映射，是指带有可点击区域的一幅图像。
然而光有map是不够的，还需要配合area标签来使用，area元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域，也就是指定的点击区域。
说了这么多，还是直接上代码吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:1024px;
margin:10px auto;
}
img{
width:1024px;
height:200px;
}
#mapArea{
outline:none;
}
</style>
</head>
<body>
<div class="box">
<img src="adver_xmb.png" alt="" usemap="#planetmap">
<map name="planetmap" id="planetmap">
<area shape="rect" coords="248,45,403,65" href ="http://xmeibao.com" target ="_blank" alt="Venus" id="mapArea" />
</map>
</div>
</body>
</html>
实现效果如下：
点击图中的链接实现跳转链接对应的网站，由于热点链接点击过后默认会有一个边框，这里我们可以给area元素设置样式：outline:none即可实现点击后无边框
ps:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。shape属性规定了点击区域的形状。而coords 属性则规定区域的 x 和 y 坐标。这两个属性结合起来使用，来规定点击区域的尺寸、形状和位置。
shape可取值：circle(圆形)、polygon(多边形)、rect(矩形)
shape取值rect，则coords对应的值为x1,y1,x2,y2。第一个坐标表示矩形左上角的坐标，第二个坐标表示矩形右下角的坐标。
shape取值circle，则coords对应的值为x,y,r。其中x，y表示圆心的坐标，r则是圆的半径。
至于多边形我没使用过，多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。（由于多边形没使用过，此处引用的w3school）
以上是关于图片可以设置多个热点但不可以添加文本热点到图片中的主要内容，如果未能解决你的问题，请参考以下文章