当前位置： 文江博客话题详情

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

发布于 2024-12-06 05:56:33 字数 4654 浏览 0 评论 0原文

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

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

云之铃。 2024-12-13 05:56:33

出于科学的兴趣，我开始研究如何在没有 JavaScript 的情况下做到这一点。这有点棘手，但没什么大不了的。 看一下。它使用 CSS3 过渡（即 transition-property: opacity ），它应该适用于所有主要浏览器（我认为甚至是 IE10）。

我已经在上面的链接中对代码进行了评论，但要点（无评论）是：

标记：

<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 属性）。对于每个“热点”，您只需为“变暗”图像指定不同的背景位置即可。您甚至可以做一些更有趣的过渡，例如使聚光灯从一个热点“飞”到另一个热点。只是一个想法。我希望您以此为灵感，将您的地图变成轻量级、现代的体验。

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.

回复 原文
~没有更多了~

关于作者

貪欢

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Cooper

文章 0 评论 0

Great Marx

文章 0 评论 0

感性

文章 0 评论 0

mb_IvyEMzfd

文章 0 评论 0

止于盛夏

文章 0 评论 0

记忆で

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文