DHTML - Objekte, um Cursor schwebend
Position in der html-Datei:
head
-Bereich
<style type="text/css"> #a1 {position:absolute; left:260; top:175; width:14; height:14;clip:rect(0 14 14 0); visibility:hidden;} #a2 {position:absolute; left:288; top:175; width:14; height:14;clip:rect(0 14 14 0); visibility:hidden;} #a3 {position:absolute; left:260; top:175; width:14; height:14;clip:rect(0 14 14 0); visibility:hidden;} #a4 {position:absolute; left:288; top:175; width:14; height:14;clip:rect(0 14 14 0); visibility:hidden;} #a5 {position:absolute; left:260; top:175; width:14; height:14;clip:rect(0 14 14 0); visibility:hidden;} #a6 {position:absolute; left:288; top:175; width:14; height:14;clip:rect(0 14 14 0); visibility:hidden;} </style>
Position in der html-Datei:
head
-Bereich
<script type="text/javascript"> <!-- /* Javascript code borrowed from DocOzone at http://www.ozones.com, modified by WebMagix 1999 */ netscape = (document.layers) ? 1:0 MSIE = (document.all) ? 1:0 var delay = 15; var yAmpl = 3; var yMax = 8; var step = .3; var ystep = .3; var currStep = 0; var tAmpl=1; var j = 0; var Xpos = 300; var Ypos = 360; document.onmousemove=MoveHandler; if (netscape) { window.captureEvents(Event.MOUSEMOVE); // Logo animation var yBase = window.innerHeight/2; var xBase = window.innerWidth/2; function MoveHandler(e) { if (netscape || MSIE) { Xpos = (netscape)?e.pageX:event.x Ypos = (netscape)?e.pageY:event.y } } window.onMouseMove = MoveHandler; } function startup() { if (netscape) { Xpos = 50; Ypos = 50; document.a1.visibility='visible'; document.a2.visibility='visible'; document.a3.visibility='visible'; document.a4.visibility='visible'; document.a5.visibility='visible'; document.a6.visibility='visible'; } else if (MSIE) { document.all.a1.style.visibility='visible'; document.all.a2.style.visibility='visible'; document.all.a3.style.visibility='visible'; document.all.a4.style.visibility='visible'; document.all.a5.style.visibility='visible'; document.all.a6.style.visibility='visible'; var windowWidth=document.body.clientWidth; var windowHeight=document.body.clientHeight; Xpos = (windowWidth/2); Ypos = (windowHeight/2); } } function littlebubbles() { if (netscape) { yBase = window.innerHeight/4 ; xBase = window.innerWidth/4; for ( j = 0 ; j < 6 ; j++ ) { document.layers[j].top=Ypos+Math.cos((20*Math.sin(currStep/(85+j)))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep+j*55)/10); document.layers[j].left=Xpos+Math.sin((20*Math.sin(currStep/85))+j*70)*xBase*(Math.sin(10+currStep/(10+j))+0.2)*Math.cos((currStep+j*55)/10); } currStep += step; setTimeout("littlebubbles()", 10) ; } else if (MSIE) { var yBase =document.body.clientWidth/4; var xBase =document.body.clientHeight/4; for ( j = 1 ; j <= 6 ; j++ ) { eval("document.all.a"+j+".style.top=Ypos+Math.cos((20*Math.sin(currStep/(85+j)))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep+j*55)/10)"); eval("document.all.a"+j+".style.left=Xpos+Math.sin((20*Math.sin(currStep/85))+j*70)*xBase*(Math.sin(10+currStep/(10+j))+0.2)*Math.cos((currStep+j*55)/10)"); } currStep += step; setTimeout("littlebubbles()", 10) ; } } //--> </script>
Position in der html-Datei:
body
-Tag
onload="startup(); littlebubbles();"
Position in der html-Datei:
body
-Bereich
<div id="a1"><img src="js/dhtml_ballsaroundcursor1.gif" alt="" /></div> <div id="a2"><img src="js/dhtml_ballsaroundcursor2.gif" alt="" /></div> <div id="a3"><img src="js/dhtml_ballsaroundcursor3.gif" alt="" /></div> <div id="a4"><img src="js/dhtml_ballsaroundcursor3.gif" alt="" /></div> <div id="a5"><img src="js/dhtml_ballsaroundcursor2.gif" alt="" /></div> <div id="a6"><img src="js/dhtml_ballsaroundcursor1.gif" alt="" /></div>
Quelle:
www.ozones.com/blueprint.html
© 2000
