이미지지도 나누기 : 마우스 오버

Question

이미지 맵에 문제가 있습니다. Chrome을 사용하면 네비게이션 이미지가 왼쪽 여백을 음수로 사용하여 화면 밖에 표시되도록하고 싶습니다. 페이지에 계속 나타나는 부분 위로 마우스를 가져 가면 슬라이드가 펼쳐집니다.

모두 괜찮습니다. 내 문제는 이미지 맵을 사용하고 있다는 것입니다. 마우스가 링크 위로 이동하면 애니메이션이 깨지고 내 nav 이미지가 사라집니다. 사용중인 코드는 다음과 같습니다.

<style> 
#logonav { 
margin-left:-395px; 
} 

#logonav:hover { 
margin-left:0px; 
-webkit-animation: navigate .3s ease; 
-webkit-animation-iteration-count: 100%; 
} 
</style> 



<img id="logonav" src="logonav.png" usemap="navmap" /><img src="logotitle.png" /> 

<map id="navmap" name="navmap"> 
    <area shape="poly" coords="coords" href="home.htm" alt="Home"> 
    <area shape="poly" coords="coords" href="decks.htm" alt="My Decks"> 
    <area shape="poly" coords="coords" href="resources.htm" alt="Resources"> 
    <area shape="poly" coords="coords" href="general.htm" alt="General"> 
    <area shape="poly" coords="coords" href="about.htm" alt="About"> 

도형 위로 마우스를 가져 가면지도가 떨어져 버릴 수 있습니다. 어떻게해야합니까?

Answer 1

별도의 Div 태그에 넣고 다음과 같이 사용하십시오.

<style> 
#logonav { 
margin-left:-395px; 
} 

#logonav:hover { 
margin-left:0px; 
-webkit-animation: navigate .3s ease; 
-webkit-animation-iteration-count: 100%; 
} 
</style> 

<div style="clear:both"> 
<img id="logonav" src="logonav.png" usemap="navmap" /><img src="logotitle.png" /> 
</div> 
<div style="clear:both"><map id="navmap" name="navmap"> 
    <area shape="poly" coords="coords" href="home.htm" alt="Home"> 
    <area shape="poly" coords="coords" href="decks.htm" alt="My Decks"> 
    <area shape="poly" coords="coords" href="resources.htm" alt="Resources"> 
    <area shape="poly" coords="coords" href="general.htm" alt="General"> 
    <area shape="poly" coords="coords" href="about.htm" alt="About"> 
</div>