Con estos ejemplos aprenderás a poner una imagen o un texto al lado del puntero del ratón.
El primer efecto es el más simple, puesto que solamente muestra una imagen estática junto al puntero. Tanto la imagen como el tamaño de esta se puede modificar cambiando el texto en negrita:
<html><script language="javascript">
<!--
B=document.all;
C=document.layers;
T1=new Array("imagen1.gif", 36 , 35 )
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
for (i=0;i<nos;i++){
crearcontenedor("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>") }
function crearcontenedor(N,Xp,Yp,W,H,At,HT,Op,St) {
with (document){
write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if (C)
write(" style='");
write(St+";' ")
}
else write((B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
cerrarcontenedor(N)
}
}
function cerrarcontenedor() {
document.write((B)?"</div>":"</layer>")
}
function getXpos(N) {
return (B) ? parseInt(B[N].style.left) : C[N].left
}
function getYpos(N) {
return (B) ? parseInt(B[N].style.top) : C[N].top
}
function movercontenedor(N,DX,DY) {
c=(B) ? B[N].style :C[N];c.left=DX;c.top=DY
}
function ciclo() {
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
movercontenedor("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
}
}
function nuevaposicion(e) {
movercontenedor("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}
if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=nuevaposicion
setInterval(" ciclo() ",rate)
//-->
</script>
</body>
</html>
Usuarios que han visto este tema también han visto...
- Como ocultar la URL en la barra de estado
- Validación de formularios usando JavaScript
- La sombra se mueve en Javascript
- Ejecutar código PHP o ASP con JavaScript
- Clicks en 20 segundos en Javascript
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.