답변 4개
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
재밌을것 같아 간단하게 만들어 보았습니다.
z-index값은 적용하지 않았지만 잘 응용하시면 될것 같군요.뭐 다른 방식으로도 가능하겠지만...
세개의 이미지를 포함하는 div의 id="container" 이라 하고, 클릭에 해당되는 div의 id="reck" 이라 했을 때
</p><p><style>
#container{position:relative;width:500px;height:400px;background:gray;}
#reck{position:absolute;left:100px;top:100px;width:200px;height:200px;background:blue;}
</style>
<script>
$(function(){
var w = $("#reck").width();
var h = $("#reck").height();
var position = $("#reck").position();
var x = position.left;
var y = position.top;
$("#container").live("mousemove",function(event){
if(event.pageX >=x && event.pageX<= x+w && event.pageY >= y && event.pageY <=y+h)
{
$("#container").css('cursor','pointer');
}
else $("#container").css('cursor','default');
});
$(document).click(function(event){
if(event.pageX >=x && event.pageX<= x+w && event.pageY >= y && event.pageY <=y+h)
{
location.replace("<a href="<a href="http://www.naver.com/" target="_blank" rel="noopener noreferrer">http://www.naver.com/</a>"><a href="http://www.naver.com/" target="_blank" rel="noopener noreferrer">http://www.naver.com/</a></a>");
}
});
});
</script>
<div id="container">
<div id="reck"></div>
</div></p><p>
답변에 대한 댓글 1개
제가 말씀 드린 방법도 저는 먹힐 것 같은데요.
역시 네이버칼라님 소스는 괜히 있어 보이십니당. ㅎ
죄송해요. ^^
댓글을 작성하려면 로그인이 필요합니다.
굳이 해야한다면면 c에다가 a모양, b모양의 이미지맵을 따서 적용해보세요~
a와 b의 모양이 항상 일정하다면 그렇게 하면 간편하게 해결 될 것 같은데요^^
댓글을 작성하려면 로그인이 필요합니다.
혹시 이런 형태로 구현이 안 될까요?
https://developer.mozilla.org/ko/docs/Web/CSS/Understanding_z-index/Adding_z-index">https://developer.mozilla.org/ko/docs/Web/CSS/Understanding_z-index/Adding_z-index
position 속성을 absolute로 변경한다거나 반대로 적용처리하며서리
style 속성의 z-index 를 이용하면 되지 않을까 싶어서요.
해 본적이 없어 자신은 없습니다. ㅡㅡ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인