이미지 맵/스왑의 이미지간에 페이드 전환을 만드는 방법.

플로리다 지역의지도를 만들었습니다. 여기에는 다른 위치의 핫스팟이 포함되어 있으며 마우스로 가리키면 다른 모든 영역이 어두워집니다. 내가 한 일은 맵의 하나의 보통 이미지를 만들고 주변 지역이 어둡게 된 각 위치의 이미지를 분리하는 것입니다. 지도의 특정 영역 위로 마우스를 이동하면 다른 이미지와 바뀝니다. 이 효과를 얻으려는 시도 : http://www.sandestin.com/Map.html 일반 빠른 전환 대신 이미지간에 페이드를 만들고 싶습니다. 저는 지난 2 일 동안이 프로젝트의 한 부분에서 일해 왔으며 어떤 이유로 든 알아 내지 못한 것 같습니다.이미지 맵/스왑의 이미지간에 페이드 전환을 만드는 방법.

<!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는 때로는 작업을 완료하지만, 결과로 얻을 수있는 것을 사용자 정의하는 것은 싸울만한 가치가없는 전투입니다. 깨끗한 코드로 시작하여 jQuery와 같은 프레임 워크를 사용하여 표준 기반 CSS 및 JavaScript로 시작하는 것이 더 좋습니다. –

과학에 관심을두고 필자는 JavaScript없이 이것을 수행하는 방법을 알아 냈습니다. 조금 까다 롭지 만 큰 일은 아니 었습니다. Take a look. 모든 주요 브라우저에서 작동해야하는 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 속성을 사용해야합니다. 각 "핫스팟"에 대해 "어둡게하기"이미지에 다른 background-position을 지정하면됩니다. 하나의 핫스팟에서 다른 핫스팟으로 스포트라이트를 "날아갈"때와 같이 좀 더 재미있는 전환을 할 수도 있습니다. 그냥 생각. 나는 이것을 당신의지도를 가볍고 현대적인 경험으로 바꾸기위한 영감으로 이것을 사용하기를 바랍니다.

출처

2011-09-24 02:58:57

정말 고마워요! 그 놀라운. – user961300

이미지 맵/스왑의 이미지간에 페이드 전환을 만드는 방법.

답변

관련 문제