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...
- Coger Variables
- Detectar el bloqueo de mayúsculas
- Detectar el final de una descarga
- Jerarquia Javascript
- Texto por defecto que desaparece
- 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-2008 Factoría de Internet S.L.. Todos los derechos reservados.