<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width">
<title>Rollover - Animation - Links</title>
<style>
body{ background:black;
cursor:crosshair;
overflow:hidden;
font-family:Verdana;
font-size:10pt;
color:white;
}
.zoom{ visibility:visible;
position:absolute;
top:-50;
font-family:Verdana;
font-size:0pt;
}
.links, a{ text-decoration:none;
font-family:Verdana;
font-size:10pt;
color:white;
}
</style>
<script>
var x,y;
var timer;
var step=0;
var fsize=0;
miArray=new Array('[TL1]','[TL2]','[TL3]','[TL4]');
function handlerMM(e){ x=(!document.all)? e.pageX : event.clientX;
y=(!document.all)? e.pageY : event.clientY;
}
function lkzoom(){ if (fsize<=950){ document.getElementById('zoom').style.fontSize=fsize; document.getElementById('zoom').style.left=x-(Math.floor(fsize/2)); document.getElementById('zoom').style.top=y-(Math.floor(fsize/2)); step+=1;
fsize+=step;
timer=setTimeout('lkzoom()',20);}
else { clearTimeout(timer);
fsize=0;
step=0;
document.getElementById('zoom').style.top=-2000; }
}
function change(t){ mrc="rgb("+Math.round(Math.random()*256/1)+","+Math.round(Math.random()*256/1)+","+Math.round(Math.random()*256/1)+")"; document.getElementById('zoom').style.color=mrc; document.getElementById('zoom').innerHTML=miArray[t-1]; lkzoom();
}
document.onmousemove=handlerMM;
</script>
</head>
<body>
<div id="zoom" class="zoom"></div>
<div id="links" class="links" align="center">
<h1>Mueve el mouse sobre un link</h1>
<a href="#" target="_self" onMouseOver="change('1')">[textlink 1]</a><a href="#" target="_self" onMouseOver="change('2')">[textlink 2]</a><a href="#" target="_self" onMouseOver="change('3')">[textlink 3]</a><a href="#" target="_self" onMouseOver="change('4')">[textlink 4]</a><h5>Arrastra el mouse para ver el efecto</h5>
</div>
</body>
</html>
