如何在图像映射/交换中的图像之间创建淡入淡出过渡。

时间：2011-09-23 19:24:12

标签： javascript jquery imagemap

我创建了佛罗里达州的一部分地图。它包含不同位置的热点，当您将鼠标悬停在它们上方时，所有其他区域都会变暗。我所做的是创建一张地图的正常图像，并为每个位置分开图像，周围区域变暗。当您将鼠标悬停在地图上的区域上时，它会与另一个图像交换。我试图达到这个效果：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 个答案:

答案 0 :(得分：0)

为了科学的利益，我开始着手解决如何在没有JavaScript的情况下做到这一点。这有点棘手，但没什么大不了的。 Take a look.它使用CSS3过渡（即transition-property: opacity），它应该适用于所有主流浏览器（我认为甚至是IE10）。

我已经评论了上述链接中的代码，但是gist， 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。你甚至可以做一些更有趣的转换，比如让聚光灯从一个热点“飞”到另一个热点。只是一个想法。我希望您将此作为灵感来将您的地图变成轻量级的现代体验。

相关问题
最新问题