now
10
2020-12-03 17:41:01 작성 2020-12-03 17:47:45 수정됨
3
200

초보 jquery selector 질문있습니다.


안녕하세요 jquery selector 질문있습니다.

현재 웹 페이지를 만들고 있습니다. 

아래 이미지와 같이 3개 조각의 이미지를 합하여 하나의 완성된 지도 이미지로 보이고, 

완성된 지도에서 마우스 오버시 3조각 모두 다르게 인식하고 싶습니다. 


예를 들어서, 첫번째 이미지에 마우스 오버하였을 때, 첫번째 지역을 인식하고, 

두번째 이미지에 마우스 오버 하였을 시 두번째 지역을 인식하도록 하려고 합니다.


그런데 아래 이미지에서 처럼,  3개의 조각 이미지들의 모양은 다르지만, 모두 같은 너비, 높이 직사각형 파일이라 그런지, 아래 html 소스코드처럼 작성했을 때 jquery 

$('div.img_container').find('img'); 로 확인해보면, img1,2,3 이 겹쳐져서 그런지, 마우스 오버시 가장 위에 올라가있는 img3만 인식이 됩니다.. 


position: absolute;;z-index: 2를 css에 주어도 가장 마지막 img만 인식되는데요 주르륵..

혹시 마우스 오버시 img1,2,3 모두 각각 인식할 수 있는 방법이 있을까요?



이미지는 높이 너비가 같은, 즉 아래 이미지와 같이 직사각형 안에 들어있어야 3개로 합쳤을 때 지도처럼 보입니다.. 

안그러면 조각조각 화면에서의 위치를 맞춰줘야해서.. 그방법은 사용하지 않으려고 합니다 ㅠㅠ


이미지 각각을 마우스 오버시 인식할 수 있는 jQuery 나, 아니면 다른 방법이 있을까요?


<div class='img_container'>
  <img id='img1'>
  <img id='img2'>
  <img id='img3'>
</div>




0
  • 답변 3

  • 까꿍
    892
    2020-12-03 18:21:56 작성 2020-12-03 18:23:11 수정됨

    음...

    이건 아마도 이미지에 좌표를 따야할 것 같은데요?

    https://semizzang.tistory.com/385

  • now
    10
    2020-12-03 19:05:32
    감사합니다 ... ㅠㅠ 근데 다른 방법은 없겠죠 ㅠㅠ ..
  • 겸둥이l
    689
    2020-12-04 11:10:22

    그럼 해당 각각 id 값기준으로 오버시 이벤트 주면안될까요?

  • 로그인을 하시면 답변을 등록할 수 있습니다.