ESRI Map Journal 템플릿에서 링크 된 이미지가 마우스 오버시 변경되는 간단한 스크립트를 설정하려고합니다. 일반적으로 나는 이와 같은 것을 할 것입니다.
<script language="javascript">
function MouseRollover(MyImage) {
MyImage.src = "image2";
}
function MouseOut(MyImage) {
MyImage.src = "image1";
}
</script>
<a href="link">
<img src="image1" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
</a>
그러나 템플릿이 포인터 이벤트가있는 래퍼 div를 자동으로 삽입하기 때문에 Map Journal에서는 작동하지 않습니다. all; 특성. 이 작업을 수행하는 이유는 이미지가 Map Journal 템플릿에 의해 라이트 박스에서 열리도록 자동 설정되기 때문입니다. 이에 대응하고 이미지가 다른 것에 링크되도록 허용하기 위해 래퍼 div가 사용됩니다. 그래서 그것은됩니다;
<a href="link">
<div id="image-wrapper" style="pointer-events: all; display: inline-block; cursor: default; max-width: 100%; position: relative;">
<img src="image1" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)"></div>
</a>
그러나 이렇게하면 위의 호버 스크립트가 비활성화됩니다. pointer-event : none으로 div CSS를 재정의하면 호버 스크립트가 작동하지만 링크가 작동하지 않습니다.
링크와 호버가 모두 작동하도록이 문제를 해결하는 방법에 대한 제안 사항이 있습니까? 마우스 오버가 div에 작용하도록 스크립트를 변경하는 것에 대해 생각했지만 이미지가 변경됩니다. 어떻게 이것을 JS로 코딩 할 수 있습니까? 아니면 다른 해결책이 있습니까?
이것은 자바 스크립트없이 CSS로 작동합니다. 가능하면 항상 더 좋습니다. 이것이 당신에게 효과가 있는지 알려주십시오.
.default-image {
display: block;
}
.hover-image {
display: none;
}
#image-wrapper:hover .default-image {
display: none;
}
#image-wrapper:hover .hover-image {
display: block;
}<a href="link">
<div id="image-wrapper" style="pointer-events: all; display: inline-block; cursor: default; max-width: 100%; position: relative;">
<img class="default-image" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png" />
<img class="hover-image" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png" />
</div>
</a>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다