z-index

z-index

QA

z-index

본문

 

5b1c58c389e7e5e83309b2cdc364ce23_1435464547_713.jpg

a는 배경 b는 배경위에 png이미지파일 c는 그위에 있는 png파일입니다.

그런데 b에 a태그(링크나 hover)를 걸고싶은데 c.png파일이 위에 얹어져서 b에 태그가 안걸려요.

c가 png라 중간에 없는 투명 파일인데도 영역이 전체로 다 잡히는건가요??

 

 

ㅜ 정말 도와주세요~  

이 질문에 댓글 쓰기 :

답변 4

배경이 없지만 영역은 차지하고 있습니다...

c를 맨 뒤로 보내시거나... 하셔야 클릭이 됩니다..

혹시 이런 형태로 구현이 안 될까요?

 

https://developer.mozilla.org/ko/docs/Web/CSS/Understanding_z-index/Adding_z-index

 

position 속성을 absolute로 변경한다거나 반대로 적용처리하며서리

style 속성의 z-index 를 이용하면 되지 않을까 싶어서요.

해 본적이 없어 자신은 없습니다. ㅡㅡ 

굳이 해야한다면면 c에다가 a모양, b모양의 이미지맵을 따서 적용해보세요~

a와 b의 모양이 항상 일정하다면 그렇게 하면 간편하게 해결 될 것 같은데요^^

재밌을것 같아 간단하게 만들어 보았습니다.

z-index값은 적용하지 않았지만 잘 응용하시면 될것 같군요.뭐 다른 방식으로도 가능하겠지만... 

 

세개의 이미지를 포함하는 div의 id="container" 이라 하고, 클릭에 해당되는 div의 id="reck" 이라 했을 때

 

 
<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("http://www.naver.com/");
        }
    });
});
</script>
<div id="container">
    <div id="reck"></div>
</div>
 

 

 

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 8
QA 내용 검색
filter #jpg ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT