현재 버전

#html #css #selector #javascript #jquery

초보 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>





수정 이력

2020-12-03 17:47:45 에 아래 내용에서 변경 됨 #5

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

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

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

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


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

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


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

$('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>




2020-12-03 17:46:30 에 아래 내용에서 변경 됨 #4

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

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

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

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


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

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


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

$('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>




2020-12-03 17:45:54 에 아래 내용에서 변경 됨 #3

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

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

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

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


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

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


그런데 아래 이미지에서 처럼,  3개의 조각 이미지들이 모두 같은 heignt, width 사이즈인 이미지라 그런지, 아래 소스코드처럼 작성했을 때

$('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>




2020-12-03 17:44:31 에 아래 내용에서 변경 됨 #2

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

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

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

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


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

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


그런데 아래 3개의 이미지 파일 모두 같은 heignt, width 사이즈인 이미지라 그런지, 아래 소스코드처럼 작성했을 때

$('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>




2020-12-03 17:43:01 에 아래 내용에서 변경 됨 #1

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

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

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

완성된 지도에서 3부분 다르게 인식하고 싶습니다. 


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

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


그런데 아래 3개의 이미지 파일 모두 같은 heignt, width 사이즈인 이미지라 그런지, 아래 소스코드처럼 작성했을 때

$('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>