如何在圖像映射/交換中的圖像之間創建淡入淡出過渡。

我創建了佛羅里達州的一部分地圖。它包含不同位置的熱點，當您將鼠標懸停在其上時，其他所有區域都會變暗。我所做的是創建一張地圖的正常圖像，並將每個位置的圖像與周圍的區域變暗。當您將鼠標懸停在地圖上的區域上時，會與其他圖像交換。我試圖達到這種效果：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>

來源

2011-09-23 user961300

Diodeus是不必要的磨料，但（他）最終是正確的。 Dreamweaver/Fireworks有時可以完成這項工作，但是定製你所得到的結果是一場不值得戰鬥的戰鬥。最好從乾淨的代碼開始，從基於標準的CSS和JavaScript開始，可能使用像jQuery這樣的框架。 –

爲了科學的興趣，我開始研究如何在沒有JavaScript的情況下做到這一點。這有點棘手，但沒有什麼重要的。 Take a look.它使用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即可。你甚至可以做一些更有趣的轉換，比如讓聚光燈從一個熱點「飛」到另一個熱點。只是一個想法。我希望你以此爲靈感，將你的地圖變成輕量級的現代體驗。

來源

2011-09-24 02:58:57

非常感謝！太棒了。 – user961300

如何在圖像映射/交換中的圖像之間創建淡入淡出過渡。

回答

相關問題