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

µ¥¸ð¸¦ È®ÀÎÇϼ¼¿ä

¾Æ·¡´Â º» ¿¹Á¦ÀÇ ÀÚ¹Ù½ºÅ©¸³Æ® ¼Ò½ºÀÔ´Ï´Ù.

<html>
<head>
    <title>ÇØÇÇCGI</title>

<script language="javascript1.2">
var magnification=3 ;  /*  magnification ratio is 3X enlargement */
var magviewersize=.5 ; /*  magnification viewer is 50% of the image width */
</script>
<script language="javascript1.2">
var quot="'";
var Magnifico=new Array();
var magnify=false;
var magStartX=0;
var magStartY=0;

function initMagnifier(){
    for (im=0; im<document.images.length; im++){
        var magthis=false;
        if(document.images[im].parentNode.className.indexOf("magnify_this")>=0){magthis=true};
        if(document.images[im].parentNode.href) {
        if(document.images[im].parentNode.href.indexOf("initMagnifier")>=0){magthis=true} }
        if( document.images[im].id.indexOf("Magnifier")>=0 ||        document.images[im].id.indexOf("Magtile")>=0 ){magthis=false};
   
        if(magthis==true){ nextImage=document.images[im];
       
        var thisImageCode=nextImage.parentNode.innerHTML.substr(0,nextImage.parentNode.innerHTML.indexOf(">"))+ ' id="bgbaseimg'+im+'" galleryimg="false" oncontextmenu="return false;" '+ ' onmouseover ="setMagnifier('+im+');" '+ ' onmouseout ="hideMagnifier('+im+'); return false" >';
       
        if (nextImage.style.cssFloat){
            var alignment=nextImage.style.cssFloat}
            else if (nextImage.align) {
                var alignment=nextImage.align
        }
            else {var alignment='none'} nextImage.parentNode.innerHTML= '<div id="placeholder'+im+'" style="position:relative; left:0px; top:0px; float:'+alignment+';'+ ' width:'+nextImage.offsetWidth+'px; height:'+nextImage.offsetHeight+'px;"'+ ' onclick="return false">'+ '<div id="imgholder'+im+'" style="position:absolute; left:0px; top:0px; border:0px solid blue; overflow:hidden">'+ thisImageCode+ '<div id=Magnifier'+im+' style="position:absolute; left:0px; top:0px; '+ ' width:'+(nextImage.offsetWidth*magviewersize)+'px; height:'+(nextImage.offsetHeight*magviewersize)+'px; '+ ' border:1px solid gray; visibility:hidden; overflow:hidden; '+ ' cursor:move; background-color:gray; " title="Move magnifier to see details"'+ ' ondrag="return false" '+ ' onmouseover ="setMagnifier('+im+'); " '+ ' onmousedown="showMagnifier('+im+',event.clientX,event.clientY); return false" '+ ' onmousemove="if (magnify==true) {moveMagnifier('+im+',event.clientX,event.clientY)}" '+ ' onmouseup ="magnify=false; return false" '+ '><img id="Magtile'+im+'" src="'+nextImage.src+'" style="position:absolute; '+ ' left:0px; top:0px; width:'+nextImage.offsetWidth*magnification+'px; border:0px;" '+ ' onmouseover="this.galleryimg='+quot+'no'+quot+'" oncontextmenu="return false;">'+ '</div></div></div>';
            Magnifico[im]=document.getElementById('Magnifier'+im); document.getElementById('bgbaseimg'+im).style.cssFloat='none'; Magnifico[im].style.left=((document.getElementById('imgholder'+im).offsetWidth/2)-(Magnifico[im].offsetWidth/2))+'px'; Magnifico[im].style.top=((document.getElementById('imgholder'+im).offsetHeight/2)-(Magnifico[im].offsetHeight/2))+'px';
            setMagtile(im);
        }
    }
}
           
function setMagnifier(idm){
    Magnifico[idm].style.visibility='visible';
}
       
function setMagtile(idm){
    MagImg=document.getElementById('Magtile'+idm);
    xx=(MagImg.offsetWidth-Magnifico[idm].offsetWidth)/ (document.getElementById('imgholder'+idm).offsetWidth-Magnifico[idm].offsetWidth); yy=(MagImg.offsetHeight-Magnifico[idm].offsetHeight)/(document.getElementById('imgholder'+idm).offsetHeight-Magnifico[idm].offsetHeight);
    MagImg.style.left=(0-(parseInt(Magnifico[idm].style.left))*xx)+'px' ;
    MagImg.style.top=(0-(parseInt(Magnifico[idm].style.top))*yy)+'px' ;
}

function showMagnifier(idm,X,Y){
    magnify=true;
    magStartX=X; magStartY=Y;
}

function moveMagnifier(idm,X,Y){
    Magnifico[idm].style.left=(parseInt(Magnifico[idm].style.left)+X-magStartX)+'px';
    Magnifico[idm].style.top =(parseInt(Magnifico[idm].style.top) +Y-magStartY)+'px';
    magStartX=X;
    magStartY=Y;

    if (Magnifico[idm].offsetLeft<=0 ){
        magStartX=magStartX-Magnifico[idm].offsetLeft;
        Magnifico[idm].style.left='0px' }
    if (Magnifico[idm].offsetTop<=0 ) {magStartY=magStartY-Magnifico[idm].offsetTop;
        Magnifico[idm].style.top='0px' }
        var rtlimit=document.getElementById('imgholder'+idm).offsetWidth-Magnifico[idm].offsetWidth;

    var btlimit=document.getElementById('imgholder'+idm).offsetHeight-Magnifico[idm].offsetHeight;
    if (Magnifico[idm].offsetLeft>=rtlimit ) {magStartX=magStartX-(Magnifico[idm].offsetLeft-rtlimit);
        Magnifico[idm].style.left=rtlimit+'px' }
    if (Magnifico[idm].offsetTop>=btlimit ) {magStartY=magStartY-(Magnifico[idm].offsetTop-btlimit);
        Magnifico[idm].style.top=btlimit+'px' } setMagtile(idm);
}

function hideMagnifier(idm){
    Magnifico[idm].style.visibility="hidden";
    magnify=false;
}
</script>
</head>
<body>
À̹ÌÁö À§¿¡ ¸¶¿ì½º Ä¿¼­¸¦ ¿Ã·Áº¸¼¼¿ä.<p>
<div style="font-size:1px; display:none;">zipzoom</div>

<a href="javascript:initMagnifier()" class="magnify_this"><img src="http://demo.happycgi.com/jini/pick1.jpg" border="0"></a><p>
<script language="javascript" defer>initMagnifier()</script>

</body>
</html>


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