[javaScript]map + area에 hover를 적용할 수 있는 방법

 

 

안녕하세요 무택입니다 :)

오늘은 JS를 이용해서 map+area에 `hover`효과를 줄 수 있는 방법에 대해 써보려고 합니다.

`hover`는 css에서 간단하게 줄 수 있는 코드인데 area에도 적용이 가능할까 궁금증에 찾아본 내용인데 JS를 이용해서 적용할 수 있더라구요. 주로 css에 접근할 수 없는 경우에 쓸 수 있는 코드로, 아래에서 같이 한 번 살펴봐요😀

 

HTML

<map name="eft_hover">
  <img src="https://i.ibb.co/fp0Sq9q/Untitled2.png" id="main_img" usemap="#eft_hover">
  <area onmouseover="on_mouse()" onmouseout="off_mouse()" shape="rect" coords="0,0,400,400" href="">
</map>

 

JS

function on_mouse() {
  document.querySelector('#main_img').src = `https://i.ibb.co/RPM1KMJ/image-16.png`;
}
function off_mouse() {
  document.querySelector('#main_img').src = `https://i.ibb.co/fp0Sq9q/Untitled2.png`;
}

// 이미지가 많아 넘버링이 필요한 경우
function on_mouse_num(num) {
  document.querySelector('#main_img').src = `/${num}`;
}

 

Codepen

See the Pen [javaScript]map + area에 hover를 적용할 수 있는 방법 by TytanLee (@TytanLee) on CodePen.

 

 

 

코드 설명

원리는 정말 간단합니다. 함수를 만들어놓고 area에 마우스가 들어오면 함수 실행하는 방법입니다. 간단히 말해서 `img.src`를 바꿔주는 함수만 만들면 됩니다.

function on_mouse() {
  document.querySelector('#main_img').src = `https://i.ibb.co/RPM1KMJ/image-16.png`;
}

위 코드가 `img.src`를 바꿔주는 함수입니다. `off_mouse()`는 반대로 마우스가 나가면 원래 이미지로 돌아오게 하는 함수입니다.

위 기능을 만들고 area에 JS트리거를 활용해서 `onmouseover="on_mouse()"`를 넣어주면 area에 마우스가 올라오면 함수를 실행시켜주게 됩니다.

+응용버전

이미지가 많아 넘버링이 필요한 경우에는 함수를 조금 변형해서 사용할 수 있습니다.

function on_mouse_num(num) {
  document.querySelector('#main_img').src = `/photo_name_${num}.jpg`;
}

위 코드를 활용해서 이미지의 이름 뒤에 1,2 이렇게 번호를 붙여 놓은 뒤에 `onmouseover="on_mouse(1)"`그리고 `onmouseover="on_mouse(2)"` 이런 식으로 코드를 만들어주시면 `photo_name_1.jpg`, `photo_name_2.jpg`의 이름을 가진 이미지를 여러개 사용할 수 있습니다.

간단한 기능이지만 혹시라도 누군가는 필요할지도 몰라 포스팅을 작성해 봤습니다. 

(저도 JS를 처음 배울 때는 간단한 기능도 어떻게 구현하는지 몰랐기 때문에..)