마우스를 따라 다니는 그림
페이지 정보
본문
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-KR">
<title>Star Light</title>
<meta name="generator" content="Namo WebEditor v3.0">
<style><!--
#trailsprite1 { position: absolute; z-index: 100; top: 1px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite2 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite3 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite4 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite5 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite6 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
ol { font: 10pt arial, geneva, sans-serif }-->
</style>
<script language="JavaScript">
<!-- Hide from browsers that don't know JavaScript
var version = 0;
if (navigator.userAgent.indexOf("MSIE 4") != -1) version = 5;
else if
(navigator.userAgent.indexOf("MSIE 3") != -1) version = 1;
else if
(navigator.userAgent.indexOf("Mozilla/4") != -1) version = 4;
else if
(navigator.userAgent.indexOf("Mozilla/4.5") != -1) version = 7;
else if
(navigator.userAgent.indexOf("Mozilla/3") != -1) version = 3;
else if
(navigator.userAgent.indexOf("Mozilla/2") != -1) version = 2;
else if
(navigator.userAgent.indexOf("MSIE 4.5") != -1) version = 6;
else version = 8;
// -->
</script></head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" marginheight="0"
marginwidth="0" leftmargin="0" topmargin="0">
<p><script language="JavaScript1.1">
if (version > 3)
document.write('<div id="trailSprite1"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite1img"></div><div id="trailSprite2"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite2img"></div><div id="trailSprite3"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite3img"></div><div id="trailSprite4"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite4img"></div><div id="trailSprite5"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite5img"></div><div id="trailSprite6"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite6img"></div>')
</script>
</p>
<p><script language="JavaScript">
<!--
NS4 = (("Netscape"==navigator.appName) && ("4"<=parseInt(navigator.appVersion)))
window.name = "main"
// -->
</script>
</p>
<script language="Javascript1.1">
<!--
var isNS = (navigator.appName == "Netscape");
layerRef = (isNS) ? "document" : "document.all";
styleRef = (isNS) ? "" : ".style";
var queue = new Array();
var NUM_OF_TRAIL_PARTS = 6
for (x=1; x < 7; x++) { ///////////////Image Preload
eval("trailSpriteFrame" + x + " = new Image(10,10);");
eval("trailSpriteFrame" + x + ".src = '/java/images/trailgif" + x + ".gif';");
}
////////////////////////////////////////////////The trail Object
function trailSpriteObj(anID) {
this.trailSpriteID = "trailSprite" + anID; //as before
this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image name
this.currentFrame = 1; //the varible for looking after the frame
this.animateTrailSprite = animateTrailSprite; //declare the objects method cycle
}
function animateTrailSprite() {
if (this.currentFrame <7) { //if there are animation frames left, the change sprites the current frame
if (isNS) { //Detect the browser and perform coresponding image switch
eval("document['"+ this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src");
} else {
eval("document['" + this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src");
}
this.currentFrame ++; //and increase the objects current frame
} else { //the current frame has reached its limit so hide the sprite
eval(layerRef + '.' + this.trailSpriteID + styleRef + '.visibility = "hidden"');
}
}
/////////////////////////////////////////////////////////////////
function processAnim() {
for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
queue[x].animateTrailSprite();
}
function processMouse(e) {
currentObj = shuffleQueue();
if (isNS) {
eval("document." + currentObj + ".left = e.pageX - 0 ;");
eval("document." + currentObj + ".top = e.pageY + 5;");
} else {
eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft - 0 ;");
eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop + 5;");
}
}
function shuffleQueue() {
lastItemPos = queue.length - 1;
lastItem = queue[lastItemPos];
for (i = lastItemPos; i>0; i--)
queue[i] = queue[i-1];
queue[0] = lastItem;
queue[0].currentFrame = 1; //reset the objects frame number & make the sprite visible again
eval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility = "visible"');
return queue[0].trailSpriteID;
}
function init() {
for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //fill array with trail objects
queue[x] = new trailSpriteObj(x+1) ;
if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
document.onmousemove = processMouse;
setInterval("processAnim();",25);
}
if (version > 3)
window.onload = init;
// -->
</script>
</body>
</html>
##고쳐 줘야 하는 부분##
참고로 이 소스를 사용하시려면 마우스를 따라 다니는 그림인 trailgif1.gif~trailgif6.gif가
있어야 한다.
그리고 익스6.0이상 버젼에서는 안 되네요...ㅠ_ㅠ;;
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-KR">
<title>Star Light</title>
<meta name="generator" content="Namo WebEditor v3.0">
<style><!--
#trailsprite1 { position: absolute; z-index: 100; top: 1px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite2 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite3 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite4 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite5 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
#trailsprite6 { position: absolute; z-index: 10; top: 0px; left: 0px; width: 10px; height: 10px; visibility: visible }
ol { font: 10pt arial, geneva, sans-serif }-->
</style>
<script language="JavaScript">
<!-- Hide from browsers that don't know JavaScript
var version = 0;
if (navigator.userAgent.indexOf("MSIE 4") != -1) version = 5;
else if
(navigator.userAgent.indexOf("MSIE 3") != -1) version = 1;
else if
(navigator.userAgent.indexOf("Mozilla/4") != -1) version = 4;
else if
(navigator.userAgent.indexOf("Mozilla/4.5") != -1) version = 7;
else if
(navigator.userAgent.indexOf("Mozilla/3") != -1) version = 3;
else if
(navigator.userAgent.indexOf("Mozilla/2") != -1) version = 2;
else if
(navigator.userAgent.indexOf("MSIE 4.5") != -1) version = 6;
else version = 8;
// -->
</script></head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" marginheight="0"
marginwidth="0" leftmargin="0" topmargin="0">
<p><script language="JavaScript1.1">
if (version > 3)
document.write('<div id="trailSprite1"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite1img"></div><div id="trailSprite2"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite2img"></div><div id="trailSprite3"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite3img"></div><div id="trailSprite4"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite4img"></div><div id="trailSprite5"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite5img"></div><div id="trailSprite6"><img src="trailgif5.gif" height="10" width="10" border="0" name="trailSprite6img"></div>')
</script>
</p>
<p><script language="JavaScript">
<!--
NS4 = (("Netscape"==navigator.appName) && ("4"<=parseInt(navigator.appVersion)))
window.name = "main"
// -->
</script>
</p>
<script language="Javascript1.1">
<!--
var isNS = (navigator.appName == "Netscape");
layerRef = (isNS) ? "document" : "document.all";
styleRef = (isNS) ? "" : ".style";
var queue = new Array();
var NUM_OF_TRAIL_PARTS = 6
for (x=1; x < 7; x++) { ///////////////Image Preload
eval("trailSpriteFrame" + x + " = new Image(10,10);");
eval("trailSpriteFrame" + x + ".src = '/java/images/trailgif" + x + ".gif';");
}
////////////////////////////////////////////////The trail Object
function trailSpriteObj(anID) {
this.trailSpriteID = "trailSprite" + anID; //as before
this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image name
this.currentFrame = 1; //the varible for looking after the frame
this.animateTrailSprite = animateTrailSprite; //declare the objects method cycle
}
function animateTrailSprite() {
if (this.currentFrame <7) { //if there are animation frames left, the change sprites the current frame
if (isNS) { //Detect the browser and perform coresponding image switch
eval("document['"+ this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src");
} else {
eval("document['" + this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src");
}
this.currentFrame ++; //and increase the objects current frame
} else { //the current frame has reached its limit so hide the sprite
eval(layerRef + '.' + this.trailSpriteID + styleRef + '.visibility = "hidden"');
}
}
/////////////////////////////////////////////////////////////////
function processAnim() {
for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
queue[x].animateTrailSprite();
}
function processMouse(e) {
currentObj = shuffleQueue();
if (isNS) {
eval("document." + currentObj + ".left = e.pageX - 0 ;");
eval("document." + currentObj + ".top = e.pageY + 5;");
} else {
eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft - 0 ;");
eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop + 5;");
}
}
function shuffleQueue() {
lastItemPos = queue.length - 1;
lastItem = queue[lastItemPos];
for (i = lastItemPos; i>0; i--)
queue[i] = queue[i-1];
queue[0] = lastItem;
queue[0].currentFrame = 1; //reset the objects frame number & make the sprite visible again
eval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility = "visible"');
return queue[0].trailSpriteID;
}
function init() {
for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //fill array with trail objects
queue[x] = new trailSpriteObj(x+1) ;
if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
document.onmousemove = processMouse;
setInterval("processAnim();",25);
}
if (version > 3)
window.onload = init;
// -->
</script>
</body>
</html>
##고쳐 줘야 하는 부분##
참고로 이 소스를 사용하시려면 마우스를 따라 다니는 그림인 trailgif1.gif~trailgif6.gif가
있어야 한다.
그리고 익스6.0이상 버젼에서는 안 되네요...ㅠ_ㅠ;;
- 이전글이미지 미리보기 21.02.10
- 다음글스타일을 사용한 글자 모양들(태그대학에서 펌.) 21.02.10
댓글목록
등록된 댓글이 없습니다.