Jquery 图像映射:在鼠标上方显示区域的备用图像
假设我想创建一张具有两种鼠标悬停效果的交互式集体照片:Jquery 图像映射:在鼠标上方显示区域的备用图像,jquery,html,css,imagemap,Jquery,Html,Css,Imagemap,假设我想创建一张具有两种鼠标悬停效果的交互式集体照片: a) 在上方和下方显示工具提示 b) 突出显示人物/显示备选图像 我想做的与(查看地图2)非常相似——我希望在页面加载时,集体照片都变暗,并高亮显示每个人/在鼠标上方显示另一个图像(例如,相同的照片,但有颜色) 我已经有了带有工具提示的imagemap(请注意,区域在这里不是很精确,因为我需要使用另一个图像) 测试此代码: $(document).ready(function(e) { $('.wrapper area').ea
- a) 在上方和下方显示工具提示
- b) 突出显示人物/显示备选图像
区域
在这里不是很精确,因为我需要使用另一个图像)
测试此代码:
$(document).ready(function(e) {
$('.wrapper area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
$('.popup').show();
});
// Assigning an action to the mouseout event
$(this).mouseout(function (e) {
$('.popup').hide();
});
});
});
我能够在不使用任何JavaScript的情况下想出一个解决方案。Map#2示例似乎使用了
和
元素,这些元素非常模糊,但我还是同意了。我认为你可以用
和其他更精确的元素做同样的事情。如果不使用区域,则需要为悬停在其上的每个元素具有不同的“悬停”图像,以便可以处理矩形中的任何重叠区域
HTML
<dl class="map">
<dd>
<figcaption>
<p>Man 1</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 2</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 3</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 4</p>
</figcaption>
</dd>
<dd>
<figcaption>
<p>Man 5</p>
</figcaption>
</dd>
</dl>
非常酷,正是我需要的。你真棒。我可以问你最后一个愚蠢的问题吗:你是如何得到每个
元素的顶部
、左侧
和宽度
值的?它们基于您用于地图的图像,对吗?我刚刚尝试通过更改顶部
、左侧
、宽度
和高度
值来移动
元素。如果悬停图像的大小与原始图像相同,则背景位置将始终为-左-上。它有助于为
元素提供一种临时背景色,例如rgba(0,0,0,0.5)
,它是半透明的,以便您知道将它们放置在何处。@phantomesse您能研究一下我的问题并帮助我吗
.map {
display: block;
margin: 50px 0px 0px 40px;
padding: 0px;
position: relative;
background: url('map_silhouette_black.png');
width: 600px;
height: 400px;
}
.map dd {
display: block;
margin: 0px;
padding: 0px;
position: absolute;
cursor: pointer;
}
.map dd figcaption {
display: none;
margin: -50px 0px 0px -60px;
padding: 10px;
position: relative;
background: #333;
color: #FFF;
font: 14px sans-serif;
text-align: center;
border-radius: 100%;
width: 120px;
box-sizing: border-box;
}
.map dd figcaption:before {
content: '';
display: block;
position: absolute;
bottom: -15px;
left: 50%;
border: 10px #333 solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
.map dd:hover figcaption {
display: block;
}
.map dd:nth-child(1) {
top: 20px;
left: 20px;
background-position: -20px -20px;
width: 115px;
height: 335px;
}
.map dd:nth-child(2) {
top: 20px;
left: 135px;
background-position: -135px -20px;
width: 115px;
height: 345px;
}
.map dd:nth-child(3) {
top: 5px;
left: 250px;
background-position: -250px -5px;
width: 125px;
height: 385px;
}
.map dd:nth-child(4) {
top: 25px;
left: 360px;
background-position: -360px -25px;
width: 120px;
height: 350px;
}
.map dd:nth-child(5) {
top: 25px;
left: 470px;
background-position: -470px -25px;
width: 110px;
height: 330px;
}
.map dd:nth-child(1):hover {
background-image: url('map_silhouette_color1.png');
}
.map dd:nth-child(2):hover {
background-image: url('map_silhouette_color2.png');
}
.map dd:nth-child(3):hover {
background-image: url('map_silhouette_color3.png');
}
.map dd:nth-child(4):hover {
background-image: url('map_silhouette_color4.png');
}
.map dd:nth-child(5):hover {
background-image: url('map_silhouette_color5.png');
}