图像映射的基本使用方法,css图片投影
一、前言
通过使用图像映射，可以将图像的某些区域指定为热点。将鼠标指针置于该区域上，以显示一些内容信息。当然，我们也可以点击这个区域进行跳转，实现一个类似图片导航的功能。
从网上找到上面这张图，想实现以下功能：鼠标悬停在大家身上，希望出现一个矩形框，点击后可以跳转到相应的网站。
效果如下：
:
二、代码实现
1.您需要做的第一件事是将图像添加到页面中，并将其放入一个名为div:
class= image map img width= 500 height= 350 src= test . jpg /div 2。然后，在图片后面加上每个人的网站链接列表。需要给每个列表项分配一个类以便标识列表项中的人。您还可以为每个链接设置title属性，其中包含该人的姓名。这样，当鼠标悬停在链接上时，在大多数浏览器上显示的工具提示中将显示该人的姓名。
class= image map img width= 500 height= 350 src= test . jpg ul Li class= Baidu a href= 3359 www . Baidu . com target= _ blank Span class= note Baidu/Span/a/Li class=滕循 a href= 3359 www . QQ . com target= _ blank Span class= note Tencent/Span/a/Li class= xinlang a href= 3 Li class= Taobao A href= 3359 www . Taobao . com target= _ blank span class= note Taobao/span/A/Li class= JD A href= https://www . JD . com target= _ blank span class= note JD.COM/span/A/Li/ul/div我想自定义鼠标悬停在这里时显示的内容样式，所以没有使用title属性，所以在A标记中添加了span。
3.设置外部div的宽度和高度，让它和图像的大小保持一致。然后，将div的position属性设置为relative，因为这样包含的链接就可以相对于div的边缘(即图像)进行绝对定位。
您不希望列表的黑点出现在页面上，并且您还希望移除列表项的内外边距。image map { width:500 px；高度：350px位置：相对；}.image map ul { margin:0；填充：0；列表样式：无；}4.接下来的事情是对链接应用样式。链接的绝对定位(因为我们在外层div上设置了position属性为relative，所以相对于div定位在这里，div和图片的宽度和高度是一样的，也就是说我们是从图片的左上角定位)，定位到对应的人，形成热点。但是，首先您需要设置它们的宽度和高度，以创建所需的单击区域。imagemap a { position:absolute；/*转换成块级元素，这样就可以形成一个块区域*/display:block；宽度：50px高度：60px文字-装饰：无；}.图像映射。百度a { top:70px；左：65px}.图像映射。滕循a { top:85px；左：150px}.图像映射。新浪a { top:70px；左：230px}.图像映射。淘宝a { top:70px；左：305px}.图像映射。jda { top:70px；左：365px}/*鼠标滑过时，一个框*/。影像图a: hover {border: 1px纯白；}5.接下来，我们需要设置鼠标滚动时显示的文本内容的样式。我们希望它出现在字符的顶部，带有背景色、内边距和其他样式，文本居中：imagemap a .注意{ position:absolute；top:-2em；左：-100e m；背景色：# 42b983颜色：白色；宽度：2em文本对齐：居中；填充：0.2em 0.5em边框半径：5px}.imagemap a:悬停。注意{ left:0；}注意：
当position属性的值为绝对绝对定位时，元素会被移出正常的文档流，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。因为列表中的link A标签，我们对其进行了绝对定位，所以A标签中的span是相对于link A定位的，这里将top设置为负值是将元素上移一段距离，左边的值为-100em，这样span一开始就不在可见区域。然后，当鼠标经过时，将left的值重置到正确的位置。另外，一般情况下，设置行内元素的宽度和高度是没有用的，但是在上面的代码中，我们可以成功设置span的宽度和宽度，因为span在这里已经被绝对定位了，可以设置绝对定位后的行内元素的宽度和高度。
知识点：行内元素设置宽高的几种方法
3种设置线条元素宽度和高度的方法
使用显示：显示：块/内联-块使用位置：位置：绝对/固定使用浮点：浮点：左/右6。没有更多的，可以测试一下，看看。现在，实现了一个简单的图像映射。
关于CSS图像映射的这篇文章到此结束。有关CSS图像映射的更多信息，请搜索以前的文章或继续浏览以下相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。