이미지 맵 좌표 만드는 사이트

 

 

이미지에 좌표 만들어주는 웹 사이트

https://www.image-maps.com/

 

<img src="/res/cms/image/common/etc/unsupported-browser2.png" lt="unsupported-browser" 
	usemap="#imgmap" > 
   
<map id="imgmap" name="imgmap">			
    <area  alt="" title="" href="https://www.mozilla.org/en-US/firefox/new/" shape="rect" 
    		coords="97,178,191,265" style="outline:none;" target="_blank" />
    <area  alt="" title="" href="https://www.microsoft.com/en-us/edge" shape="rect" 
    		coords="206,179,300,266" style="outline:none;" target="_blank"     />
    <area  alt="" title="" href="https://support.apple.com/en-us/HT204416" shape="rect" 
    		coords="314,178,401,265" style="outline:none;" target="_blank"     />
    <area  alt="" title="" href="https://www.google.com/chrome/browser/" shape="rect" 
    		coords="417,181,504,261" style="outline:none;" target="_blank"     />
</map>
<!-- 이미지에 맵 좌표
* img usemap과 map id로 매칭
* coords값이 사이트에서 만들어준 이미지 상에 지정한 좌표 값
-->

<img id="Image-Maps-Com-image-maps-2022-11-08-095452" src="https://app.image-maps.com/m/private/0/mkonau0ovu48emgl9rodiqau6m_unsupported-browser.png" border="0" width="600" height="404" orgWidth="600" orgHeight="404" usemap="#image-maps-2022-11-08-095452" alt="" />

<map name="image-maps-2022-11-08-095452" id="ImageMapsCom-image-maps-2022-11-08-095452">
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="75,229,168,315" style="outline:none;" target="_self"     />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="192,230,285,316" style="outline:none;" target="_self"     />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="306,229,399,315" style="outline:none;" target="_self"     />
<area  alt="" title="" href="http://www.image-maps.com/" shape="rect" coords="425,232,518,318" style="outline:none;" target="_self"     />
<area shape="rect" coords="598,402,600,404" alt="Image Map" style="outline:none;" title="Image Map" href="https://www.image-maps.com/" />
</map>