How to create a fade transition between the images in an image map / swap._问答_开发者

I have created a map of a part of Florida. It contains hotspots over different locations and when you hover over them, all other areas darken. What I have done is create one normal image of the map and separate images for each location with the surrounding areas darkened. When you hover over the area on the map it swaps with the other image. Im trying to achieve this effect: http://www.sandestin.com/Map.html I want to create a fade between the images instead of just a normal quick swap. I have been working on this one part of the project for the past 2 days and for some reason cant seem to figure it out.

<!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>

In the interest of science I set about to figure out how to do this without JavaScript. It was a little tricky but nothing major. Take a look. It uses CSS3 transitions (namely transition-property: opacity), which should work on all major browsers (I think even IE10).

I've commented the heck out of the code at the above link, but the gist, sans comments, is:

Markup:

<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;
}

One nice thing about this approach is that you only need one image for the map and one image to darken the "unlit" areas (if your "hotspots" are different sizes, though, you'll need to use different background images or use the background-size property). For each "hotspot" you just give the "darkening" image a different background-position. You could even do some more interesting transitions, like making the spotlight "fly" from one hotspot to another. Just a thought. I hope you use this as inspiration to turn your map into a lightweight, modern experience.