HTML에서 이미지 요소를 클릭 가능하게 만드시겠습니까?

이미지의 특정 부분이나 픽셀을 클릭할 수 있게 만들어야 하는 경우가 있습니다. 따라서 맵 및 영역 HTML 태그를 사용하여 이 작업을 수행할 수 있습니다.

위 이미지의 예에서 모바일 및 노트북 영역을 클릭 가능하게 만들고 싶습니다.

따라서 아래에 제공된 코드를 사용하여 이미지 부분을 클릭 가능하게 만들 것입니다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

HTML 맵 및 영역 태그 사용 또는 HTML의 이미지 픽셀 클릭:

지도 및 영역 태그는 사용자 정의 이미지 지도에서 유용하며 클릭 가능한 지도 마커를 만들 수 있습니다.

또한 디지털 마케팅에서 이미지에 대한 클릭 노출을 생성하는 데 유용합니다.

전자상거래 제품 이미지에서도 이러한 태그를 사용할 수 있습니다.

이러한 태그를 사용하여 일부 애니메이션과 효과를 가질 수도 있습니다.

html에서 클릭할 수 있는 이미지 특정 지점 또는 html에서 클릭할 수 있는 이미지 픽셀을 만들 수 있습니다.

html의 모든 이미지에 원, 직사각형, 다각형 또는 캔버스와 같은 사용자 정의 모양을 그릴 수 있습니다

.

구독 좋아요 공유와 긍정적인 피드백을 해주세요.

더 많은 자습서를 보려면 visit my website .

감사:)
행복한 코딩 :)

Reference

이 문제에 관하여(HTML에서 이미지 요소를 클릭 가능하게 만드시겠습니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/readymadecode/make-image-elements-clickable-in-html-3le3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다