Tricks: How to...
Image effects:
› Preload images
› Preload images 2
› Swap images
› Swap images 2
› View larger image
› Image transparency
› Image slideshow
Special effects:
› Border
› Border 2
› Watermark
› Scroller
› Scroller 2
› Link hover color
› Custom cursor
› Snowing
› Auto window resizer
› Link tips
› Popup
Buttons & menus:
› Back button
› Java buttons
› Flat buttons
› Slide menu
› Drop down menu
› Alphabet menu
Mouse effects:
› Elastic mouse
› Mouse snake
› Mouse stars
› Mouse orbit
› Mouse eyes
Text generators:
› Infobox
› Quote generator
› Fading messages
› Text fader
› Text glow
› Credits

home > real world > web resource > web source codes >

STEP 1/2: Copy the coding into the < HEAD> of your HTML document:

< HEAD>
< style type="text/css">
< !-- Begin CSS
#a { position: absolute; top: 10px; left: 10px; visibility: visible }
#b { position: absolute; top: 10px; left: 10px; visibility: visible }
#c { position: absolute; top: 10px; left: 10px; visibility: visible }
#d { position: absolute; top: 10px; left: 10px; visibility: visible }
#e { position: absolute; top: 10px; left: 10px; visibility: visible }
#f { position: absolute; top: 10px; left: 10px; visibility: visible }
#g { position: absolute; top: 10px; left: 10px; visibility: visible }
End CSS -->
< /style>
< /HEAD>

STEP 2/2: Copy this code into the < BODY> of your HTML document:

< BODY bgcolor=black>

< layer name="a0" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,2,2">< /layer>
< layer name="a1" left=10 top=10 visibility=show bgcolor="#ff8000" clip="0,0,2,2">< /layer>
< layer name="a2" left=10 top=10 visibility=show bgcolor="#ffff00" clip="0,0,2,2">< /layer>
< layer name="a3" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,2,2">< /layer>
< layer name="a4" left=10 top=10 visibility=show bgcolor="#0000ff" clip="0,0,2,2">< /layer>
< layer name="a5" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,2,2">< /layer>
< layer name="a6" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,2,2">< /layer>

< div id="starsDiv" style="position:absolute; top:0px; left:0px">
< div style="position:relative; width:2px; height:2px; background:#ffffff; font-size:2px; visibility:visible">< /div>
< div style="position:relative; width:2px; height:2px; background:#ffff00; font-size:2px; visibility:visible">< /div>
< div style="position:relative; width:2px; height:2px; background:#ffa000; font-size:2px; visibility:visible">< /div>
< div style="position:relative; width:2px; height:2px; background:#ff0000; font-size:2px; visibility:visible">< /div>
< div style="position:relative; width:2px; height:2px; background:#00ff00; font-size:2px; visibility:visible">< /div>
< div style="position:relative; width:2px; height:2px; background:#0000ff; font-size:2px; visibility:visible">< /div>
< div style="position:relative; width:2px; height:2px; background:#FF00FF; font-size:2px; visibility:visible">< /div>
< /div>

< script language="JavaScript">
< !-- Begin
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);
}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;
if (document.all) {
function MoveHandler(){
Xpos = document.body.scrollLeft + event.x;
Ypos = document.body.scrollTop + event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function animateLogo() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if (document.all) {
for (i = 0 ; i < starsDiv.all.length; i++) {
starsDiv.all[i].style.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
starsDiv.all[i].style.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
}
else if (document.layers) {
for (j = 0; j < 7; j++) { //7 is number of NS layers!
var templayer="a" + j;
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
}
}
currStep += step;
setTimeout("animateLogo()", 10);
}
animateLogo();
// End -->
< /script>