티스토리 뷰

imgDOM.html파일 만들기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title></title>
  <script language="javascript">
   var num=1;
   var index=1;
     
   function Init()
   {
    document.onmousedown=Create;
    document.oncontextmenu=function(){return false;}
   }
  
   function Create()
   {
    if(event.button==1)
    {
     /*
     //1. CSS 이용
     document.getElementById("layer1").style.left=event.x - 25;
     document.getElementById("layer1").style.top=event.y - 25;
     document.getElementById("layer1").style.display="block";
     */
    
     //2. DOM 이미지 동적 생성 및 Body 추가
     var img=document.createElement("img");
     img.setAttribute("src","images/img"+num+".gif");//(속성명, 속성값)
     num++;
     if(num>7)num=1;
     img.style.position="absolute";
     img.style.left=event.x - 25;
     img.style.top=event.y - 25;
     document.body.appendChild(img);
    }
    else if(event.button==2)
    {
     if(document.body.childNodes.length>2)
      document.body.removeChild(event.srcElement);     
    }
    else if(event.button==4)
    {
     event.srcElement.style.zIndex=index;
     index++;
    }
   }
  </script>
 </head>
 <body onload="Init();">
  <div id="layer1" style="display:none;"><img src="images/img1.gif" /></div>
 </body>
</html>
 
브라우저에서 클릭은 이미지 생성, 우클릭은 이미지 삭제 (첨부 파일 다운 받으세요)

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크