如何在图像映射/交换中的图像之间创建淡出转换。
如何在图像映射/交换中的图像之间创建淡出转换。
提问于 2011-09-23 19:24:12
我画了一张佛罗里达的地图。它包含不同位置的热点，当你悬停在它们上面时，所有其他区域都会变暗。我所做的是创建一个正常的地图图像和单独的图像，每个地点与周围地区黑暗。当您悬停在地图上的区域时，它会与另一张图像互换。我试图达到这样的效果：http://www.sandestin.com/Map.html，我想在图像之间创建一个淡出，而不是普通的快速交换。在过去的两天里，我一直在为这个项目的这一部分工作，出于某种原因，我似乎无法弄清楚。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Outdoor Map PNG.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks CS5 Dreamweaver CS5 target. Created Wed Sep 21 18:18:30 GMT-0500 (Central Daylight Time) 2011-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('../../../../Map/Out Door Rallavers/PNG/Inlet Beach OD PNG.png','Outdoor%20Map%20PNG.gif','../../../../Map/Out Door Rallavers/PNG/BGS OD.png','../../../../Map/Out Door Rallavers/PNG/Santa Rosa OD PNG.png','../../../../Map/Out Door Rallavers/PNG/Sandestin OD PNG.png','../../../../Map/Out Door Rallavers/PNG/Miramar OD PNG.png','../../../../Map/Out Door Rallavers/PNG/Destin OD PNG.png','../../../../Map/Out Door Rallavers/PNG/Okaloosa OD PNG.png');">
<img name="OutdoorMapPNG" src="Outdoor%20Map%20PNG.gif" width="960" height="296" border="0" id="OutdoorMapPNG" usemap="#m_Outdoor20Map20PNG" alt="" /><map name="m_Outdoor20Map20PNG" id="m_Outdoor20Map20PNG">
<area shape="rect" coords="688,74,960,295" href="javascript:;" alt="" onmouseout="MM_swapImage('OutdoorMapPNG','','Outdoor%20Map%20PNG.gif',1);" onmouseover="MM_swapImage('OutdoorMapPNG','','../../../../Map/Out Door Rallavers/PNG/Inlet Beach OD PNG.png',1);" />
<area shape="rect" coords="596,51,693,177" href="javascript:;" alt="" onmouseout="MM_swapImage('OutdoorMapPNG','','Outdoor%20Map%20PNG.gif',1);" onmouseover="MM_swapImage('OutdoorMapPNG','','../../../../Map/Out Door Rallavers/PNG/BGS OD.png',1);" />
<area shape="rect" coords="487,0,596,143" href="javascript:;" alt="" onmouseout="MM_swapImage('OutdoorMapPNG','','Outdoor%20Map%20PNG.gif',1);" onmouseover="MM_swapImage('OutdoorMapPNG','','../../../../Map/Out Door Rallavers/PNG/Santa Rosa OD PNG.png',1);" />
<area shape="rect" coords="394,9,488,108" href="javascript:;" alt="" onmouseout="MM_swapImage('OutdoorMapPNG','','Outdoor%20Map%20PNG.gif',1);" onmouseover="MM_swapImage('OutdoorMapPNG','','../../../../Map/Out Door Rallavers/PNG/Sandestin OD PNG.png',1);" />
<area shape="rect" coords="321,43,395,88" href="javascript:;" alt="" onmouseout="MM_swapImage('OutdoorMapPNG','','Outdoor%20Map%20PNG.gif',1);" onmouseover="MM_swapImage('OutdoorMapPNG','','../../../../Map/Out Door Rallavers/PNG/Miramar OD PNG.png',1);" />
<area shape="rect" coords="174,17,321,77" href="file:///C:/Users/Phillip/Desktop/ECCI/web_map/google_map_version/index.html" alt="" onmouseout="MM_swapImage('OutdoorMapPNG','','Outdoor%20Map%20PNG.gif',1);" onmouseover="MM_swapImage('OutdoorMapPNG','','../../../../Map/Out Door Rallavers/PNG/Destin OD PNG.png',1);" />
<area shape="rect" coords="0,42,182,74" href="javascript:;" alt="" onmouseout="MM_swapImage('OutdoorMapPNG','','Outdoor%20Map%20PNG.gif',1);" onmouseover="MM_swapImage('OutdoorMapPNG','','../../../../Map/Out Door Rallavers/PNG/Okaloosa OD PNG.png',1);" />
<area shape="rect" coords="0,42,182,74" href="javascript:;" alt="" />
</map>
</body>
</html>回答 1
Stack Overflow用户
发布于 2011-09-24 02:58:57
为了科学的利益，我开始研究如何在没有JavaScript的情况下做到这一点。虽然有点棘手但没什么大不了的。瞧一瞧。 --它使用CSS3转换(即transition-property: opacity)，它应该可以在所有主流浏览器上工作(我认为甚至IE10)。
我已经在上面的链接中对代码进行了评论，但要点是，sans注释是：
标记：
<ul id="map">
<li id="foo"><a href="#">Hello</a></li>
<li id="bar"><a href="#">Goodbye</a></li>
<li id="mask"></li>
</ul>CSS：
#foo { left: 35px; top: 35px; }
#foo:hover ~ #mask { background-position: -265px -265px }
#bar { left: 160px; top: 160px; }
#bar:hover ~ #mask { background-position: -140px -140px; }
#map, #mask {
width: 300px; height: 300px;
}
#map {
border: 1px solid black;
position: relative;
background: url(http://i.imgur.com/zucgV.png) no-repeat;
}
#map li {
position: absolute;
width: 100px; height: 100px;
z-index: 1;
}
#map a {
color: transparent;
display: block;
position: absolute;
width: 100px; height: 100px;
z-index: 100;
}
li#mask {
width: 300px; height: 300px;
background: url(http://i.imgur.com/S9Z7W.png) no-repeat;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
-moz-transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
-o-transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
-ms-transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
opacity: 0;
visibility: hidden;
}
#map li:hover { z-index: 10; }
#map :hover ~ #mask {
-webkit-transition-delay: 0s
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
opacity: .75;
visibility: visible;
}这种方法的一个好处是，您只需要一张地图图像和一张图片就可以使“未亮”区域变暗(不过，如果“热点”大小不同，则需要使用不同的背景图像或background-size属性)。对于每个“热点”，您只需给“变暗”图像一个不同的background-position。你甚至可以做一些更有趣的转变，比如让聚光灯从一个热点“飞”到另一个热点。这只是个想法。我希望你以此为灵感，把你的地图变成一个轻量级的，现代的体验。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7533819
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号