»ç¿ëÀÚ Ãø À̹ÌÁö ¸Ê(map)¿¡ »ç¿ëµÇ´Â ÁÖ¼Ò(URL)³ª ÁÖ¼Ò¿¡ È®ÀåÀÚ(#name)¸¦ Ãß°¡ÇÑ ¹®ÀÚ¿­À» ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù,

Àμö
: (¼Ó¼º ¹®ÀÚ¿­)
¼Ó¼º°ªÀº »ç¿ëÀÚƯ À̹ÌÁö ¸Ê(map)¿¡ »ç¿ëµÇ´Â ÁÖ¼Ò(URL)³ª È®ÀåÀÚ(#name)¸¦ Ãß°¡ÇÑ ÁÖ¼Ò¸¦ ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

ÀÌ ¼Ó¼ºÀº Àбâ/¾²±âÀÌ¸ç µðÆúÆ®°ªÀº ¾ø´Ù.

Ư±â

useMap ¼Ó¼ºÀº map °³Ã¼¿Í À̹ÌÁö¿¡ ¿¬°üµÈ »ç¿ëÀÚÃø À̹ÌÁö ¸ÊÀ» ÀνÄÇÑ´Ù. map °³Ã¼´Â À̹ÌÁö ¼ÓÀÇ Áö¿ªµéÀ» ÁöÁ¤ÇÑ area °³Ã¼µéÀ» Æ÷ÇÔÇÑ´Ù. »ç¿ëÀÚ´Â À̵é Áö¿ªÀ» Ŭ¸¯ÇϹǷμ­ href·Î ÁöÁ¤µÈ ÁÖ¼Ò(URL)·Î Ç×ÇØÇÒ ¼ö ÀÖ´Ù.

useMap ¼Ó¼ºÀ» ÅëÇÏ¿© ź·ÂÀûÀ¸·Î À̹ÌÁö¸ÊÀ» º¯°æÇÏ¿© ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù.

<BUTTON onclick="imgAobj.useMap='#map2'">À̹ÌÁö¸Ê º¯°æ</BUTTON>

À̼ӼºÀº IE6ºÎÅÍ Object¿Í input °³Ã¼¿¡µµ Àû¿ëµÈ´Ù.

Àû¿ë
°³Ã¼scriptHTML±Ô°ÝIE
Âü°í

ÀÌ ¼Ó¼ºÀº (¿µ¹®) HTML 3.2¿Í (¿µ¹®) W3C DOM Level 1(Document Object Model)¿¡¼­ Á¤ÀǵǾú´Ù.


¼Ó¼º ¿¹Á¦


<IMG src="../../gif/mapsample.gif" usemap="#mapname" border=1>
<MAP name="mapname">
<AREA shape="rect" coords="1, 1, 86, 26" href="http://trio.co.kr/webrefer/index.html" target="jsright">
<AREA shape="rect" coords="1, 27, 86, 52" href="http://trio.co.kr/sitelink/index.html" target="jsright">
<AREA shape="rect" coords="1, 53, 86, 78" href="http://trio.co.kr/main/index.html" target="jsright">
<AREA shape="rect" coords="1, 79, 86, 106" href="http://trio.co.kr/cgi/bbs/triobbs.cgi?db=triobbs">
<AREA shape="rect" coords="1, 107, 86, 130" href="http://trio.co.kr/main/sitemap.html">
</MAP><BR>
<SCRIPT>
obj=document.all.tags('map')[0];
imgObj=obj.previousSibling.previousSibling;
str='imgObj.nodeName='+imgObj.nodeName+', imgObj.useMap='+imgObj.useMap+'<BR>';
str+='obj.nodeName='+obj.nodeName+', obj.chidren.length='+obj.children.length+'<BR><BR>';
for (i=0;i< obj.children.length;i++){
  str+=i+'] '+obj.children[i].nodeName+' shape='+obj.children[i].shape;
  str+=' coords='+obj.children[i].coords+' href='+obj.children[i].href+'<BR>';
}
document.write(str);
</SCRIPT>