티스토리 뷰
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>
브라우저에서 클릭은 이미지 생성, 우클릭은 이미지 삭제 (첨부 파일 다운 받으세요)
invalid-file'프로그래밍 > Javascript' 카테고리의 다른 글
| [Javascript] 셀렉트박스 다중선택 이동하기 (0) | 2008.06.22 |
|---|---|
| [Javascript] DOM을 이용한 Element 추가 (0) | 2008.06.22 |
| XML Javascript DOM을 이용해 테이블 만들기 (0) | 2008.06.22 |
| [Javascript] 숫자를 문자(숫자)로 변환 (0) | 2008.06.22 |
| 자바스크립트 자료 참고 싸이트 (0) | 2008.06.22 |
- Total
- Today
- Yesterday