이미지 맵 편집기 - 무료온라인유틸리티

이미지 맵 편집기는 이미지내 특정 영역 클릭시 사이트로 이동하게 하는 이미지 맵 코드를 쉽게 만들 수 있게 해주는 이미지 유틸리티입니다.

🔗 사각 영역 정보 수정

coords 옵션: href 옵션: target 옵션: alt 옵션:

🔗 이미지 맵 코드

🗺️ 이미지 맵 미리보기

이미지 맵 예 🔗

3

3.png

3-170x600.png

<img src="3-170x600.png" usemap="#image-map3" />
            <map name="image-map3">
              <area shape="rect" coords="72,96,168,152" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=133" target="_top">
              <area shape="rect" coords="73,169,169,223" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=95" target="_top">
              <area shape="rect" coords="73,239,168,297" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=131" target="_top">
              <area shape="rect" coords="74,308,169,366" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=135" target="_top">
              <area shape="rect" coords="73,382,169,438" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=129" target="_top">
              <area shape="rect" coords="75,452,167,509" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=136" target="_top">
            </map>

4

4.png

4-170x600.png

<img src="4-170x600.png" usemap="#image-map4" />
            <map name="image-map4">
              <area shape="rect" coords="0,94,44,157" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=133" target="_top">
              <area shape="rect" coords="138,99,169,155" href="https://keyword.withanyai.com/" target="_blank">
              <area shape="rect" coords="0,168,114,225" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=95" target="_top">
              <area shape="rect" coords="137,166,167,226" href="https://ko.freeonlineutility.com/" target="_blank">
              <area shape="rect" coords="0,240,45,297" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=131" target="_top">
              <area shape="rect" coords="135,238,168,295" href="https://reviewer.withanyai.com/" target="_blank">
              <area shape="rect" coords="-1,308,85,369" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=135" target="_top">
              <area shape="rect" coords="137,311,169,366" href="https://cafe.naver.com/cranberrymarketing" target="_blank">
              <area shape="rect" coords="0,381,46,438" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=129" target="_top">
              <area shape="rect" coords="138,382,168,437" href="https://ko.withanyai.com/" target="_blank">
              <area shape="rect" coords="-1,451,85,508" href="https://blog.naver.com/PostList.naver?blogId=marketinganywhere&from=postList&categoryNo=136" target="_top">
              <area shape="rect" coords="137,449,167,512" href="https://www.webgift.kr/" target="_blank">
              <area shape="rect" coords="67,41,167,68" href="https://blog.naver.com/marketinganywhere" target="_top">
            </map>

5

5.png

5-170x600.png

관련 앱

버튼 이미지 생성기

이미지 편집기

관련 글

홈페이지형 네이버 블로그 만들기