½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > À̹ÌÁö°ü·Ã > À̹ÌÁö ¸Ê¸µÅ© È°¼ºÈ­È¿°ú »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
À̹ÌÁö ¸Ê¸µÅ© È°¼ºÈ­È¿°ú
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù À̹ÌÁö°ü·Ã
´Ù¿î·Îµå Ƚ¼ö 737 ȸ
°£´Ü¼³¸í À̹ÌÁö¿¡ ¸Ê¸µÅ©°¡ µÇ¾î ÀÖ´Â ºÎºÐÀ» Ç¥½ÃÇØÁÖ´Â ½ºÅ©¸³Æ®ÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

<html>
<head>
    <title>ÇØÇÇCGI - À̹ÌÁö¸Ê¸µÅ© È°¼ºÈ­È¿°ú</title>
<script>
var aI = {

  init: function() {
    if (!document.getElementById ||
        !document.createElement ||
        !document.getElementsByTagName)
        return;
    var anni = document.getElementsByTagName('img');
    for (var i=0;i<anni.length;i++) {
      if ((anni[i].className.search(/\bannotated\b/) != -1) &&
          (anni[i].getAttribute('usemap') != null)) {
          aI.prepImage(anni[i]);
      }
    }
  },
 
  prepImage: function(img) {
    var mapName = img.getAttribute('usemap');
    if (mapName.substr(0,1) == '#') mapName = mapName.substr(1);
    var mapObjs = document.getElementsByName(mapName);
    if (mapObjs.length != 1) return;
    var mapObj = mapObjs[0];
    var areas = mapObj.getElementsByTagName('area');
    img.areas = [];
    for (var j=areas.length-1;j>=0;j--) {
      if (areas[j].getAttribute('shape').toLowerCase() == 'rect') {
        var coo = areas[j].getAttribute('coords').split(',');
        if (coo.length != 4) break;
        var a = document.createElement('a');
        a.associatedCoords = coo;
        a.style.width = (parseInt(coo[2]) - parseInt(coo[0])) + 'px';
        a.style.height = (parseInt(coo[3]) - parseInt(coo[1])) + 'px';
        var thisAreaPosition = aI.__getAreaPosition(img,coo);
        a.style.left = thisAreaPosition[0] + 'px';
        a.style.top = thisAreaPosition[1] + 'px';
        a.className = 'annotation';
        var href = areas[j].getAttribute('href');
        if (href) {
          a.href = href;
        } else {
          // set an explicit href, otherwise it doesn't count as a link
          // for IE
          a.href = "#";
        }
        a.title = areas[j].getAttribute('title');
        var s = document.createElement('span');
        s.appendChild(document.createTextNode(''));
        a.appendChild(s);
       
        img.areas[img.areas.length] = a;
        document.getElementsByTagName('body')[0].appendChild(a);

        aI.addEvent(a,"mouseover",
          function() {
            clearTimeout(aI.hiderTimeout);
          }
          );
         
        if ((typeof showNiceTitle == 'function') &&
            (typeof hideNiceTitle == 'function')) {
          a.setAttribute('nicetitle',a.title);
          a.title = '';
          aI.addEvent(a,"mouseover",showNiceTitle);
          aI.addEvent(a,"mouseout",hideNiceTitle);
        }

      }
    }
   
    aI.addEvent(img,"mouseover",aI.showAreas);
    aI.addEvent(img,"mouseout",aI.hideAreas);
  },
 
  __getAreaPosition: function(img,coo) {
    var aleft = (img.offsetLeft + parseInt(coo[0]));
    var atop = (img.offsetTop + parseInt(coo[1]));
    var oo = img;
    while (oo.offsetParent) {
      oo = oo.offsetParent;
      aleft += oo.offsetLeft;
      atop += oo.offsetTop;
    }
    return [aleft,atop];
  },
 
  __setAreas: function(t,disp) {
    if (!t || !t.areas) return;
    for (var i=0;i<t.areas.length;i++) {
      t.areas[i].style.display = disp;
    }
  },
 
  showAreas: function(e) {
    var t = null;
    if (e && e.target) t = e.target;
    if (window.event && window.event.srcElement) t = window.event.srcElement;
    // Recalculate area positions
    for (var k=0;k<t.areas.length;k++) {
      var thisAreaPosition = aI.__getAreaPosition(t,t.areas[k].associatedCoords);
      t.areas[k].style.left = thisAreaPosition[0] + 'px';
      t.areas[k].style.top = thisAreaPosition[1] + 'px';
     
    }
    aI.__setAreas(t,'block');
  },
  hideAreas: function(e) {
    var t = null;
    if (e && e.target) t = e.target;
    if (window.event && window.event.srcElement) t = window.event.srcElement;
    clearTimeout(aI.hiderTimeout);
    aI.hiderTimeout = setTimeout(
      function() { aI.__setAreas(t,'none') }, 300);
  },
 
    addEvent: function(elm, evType, fn, useCapture) {
    // cross-browser event handling for IE5+, NS6 and Mozilla
    // By Scott Andrew
    if (elm.addEventListener){
      elm.addEventListener(evType, fn, useCapture);
      return true;
    } else if (elm.attachEvent){
      var r = elm.attachEvent("on"+evType, fn);
      return r;
    } else {
      elm['on'+evType] = fn;
    }
  }
}

aI.addEvent(window,"load",aI.init);
</script>

<style>
    a.annotation {
  position: absolute;
  border: 2px groove black;
  padding: 0;
  display: none;
}
a.annotation span {
  display: block;
  background: white;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  -moz-opacity: 0.3;
  filter:alpha(opacity=30);
}
a.annotation:hover {
  border-color: yellow;
}
img.annotated {
  border-width: 0;
}
</style>
</head>
<body>

À̹ÌÁö À§¿¡ ¸¶¿ì½º¸¦ ¿Ã¸®¸é ÇöÀç ¸Ê(map) ¸µÅ©µÈ ºÎºÐÀÌ È°¼ºÈ­ µË´Ï´Ù.<p>
<img src="img/sample.jpg" usemap="#imgmap" class="annotated"></p>

<map name="imgmap">
  <area alt="" title="Buffy mug" nohref="nohref" shape="rect" coords="170,100,210,180">
  <area alt="" title="Crap books" nohref="nohref" shape="rect" coords="170,10,220,80">
  <area alt="" title="Old computers (one runs Linux!)" nohref="nohref" shape="rect" coords="150,210,190,330">
  <area alt="" title="Obligatory cartoon" nohref="nohref"shape="rect" coords="5,5,100,70">
</map>

 

- Ãâó: www.blueb.co.kr -


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 36463713 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.