<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>
Comentarios sobre la versión: 1.0 (1)