Layer que se mueva con el cursor

josemgd · #1 (**permalink**) 07/03/2006, 10:40

Tengo una página en la que se ven en asp varias imágenes y tengo puesto que al hacer click en cualquiera de ellas me abre otra página con esa imagen en tamaño mayor. Mi idea es poder hacer que al pasar con el cursor sobre la imagen se presente esa imagen de mayor tamaño en la posición del cursor, sin que deforme el resto de la página por lo que supongo que habrá que crear un layer que se mueva con el cursor.

He conseguido que me haga esto pero en un layer previamente creado en una posicion fija. Ahora quisiera que ese layer se moviera con el cursor.

<script language="JavaScript" type="text/JavaScript">
function Zoom(capa,imagen,nombre,ancho,alto) {
im="<img src="+imagen+" width="+ancho+" height="+alto+">";
document.getElementById(capa).innerHTML=im;
}
</script>

***** ESTA CAPA DEBERÍA APARECER Y DESAPARECER EN LA POSICION DEL CURSOR ******
<div id="micapa" style="position:absolute;width:291px;height:138px; top:137px;left:303px"> </div>

ESTOY SEGURO DE QUE SE PUEDE HACER MUCHO MÁS SENCILLO PERO CON MIS CONOCIMIENTOS ESTO ES LO QUE HE PODIDO SACAR.

josemgd · #2 (**permalink**) 08/03/2006, 05:23

Nadie tiene idea

pinchoso · #3 (**permalink**) 08/03/2006, 05:40

Busca en el FAQ por los tooltips, eso te dará alguna idea

Saludos!

josemgd · #4 (**permalink**) 08/03/2006, 10:18

He visto alguna cosa, pero me parece que es mucho más complicado que lo que yo quiero.

Simplemente quiero que al ponerme sobre una imagen cuyos valores se obtienen en asp, me muestre sobre el cursor esa misma imagen con otro tamaño mayor.

pinchoso · #5 (**permalink**) 08/03/2006, 11:20

Yo no lo veo tan dificil:

Código:

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
var x=0; var y=0;
if(!document.all) {
 document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = show;
function crearAlt(texto) {
 document.getElementById("ALTdHTML").innerHTML = "<img src='image001.gif' width='800' height='600'>";
}
function show(evento) {
 document.getElementById("ALTdHTML").style.visibility = 'visible';
 //document.getElementById("ALTdHTML").style.display = 'block';
 if(document.all) {
  x = event.clientX;
  y = event.clientY + document.body.scrollTop;
    document.getElementById("ALTdHTML").style.left = x + 10;
    document.getElementById("ALTdHTML").style.top  = y + 14;
 } else {
  x = evento.clientX + document.body.scrollLeft;
  y = evento.clientY + document.body.scrollTop;
  document.getElementById("ALTdHTML").style.left = x + 10;
    document.getElementById("ALTdHTML").style.top  = y + 14;
 }
}
function hide() {
 document.getElementById("ALTdHTML").style.visibility = 'hidden';
 //document.getElementById("ALTdHTML").style.display = 'none';
 document.getElementById("ALTdHTML").innerHTML = "";
}

</script>
</head>
<body >
<div id="ALTdHTML" style="position:absolute;width:291px;height:138px; top:137px;left:303px;visibility:hidden"></div> 
<img src="image001.gif" width="235" height="139" onMouseOver="crearAlt()" onMouseOut="hide()">
</body>
</html>

josemgd · #6 (**permalink**) 08/03/2006, 12:03

Muchisimas gracias por tu rápida respuesta, no es dificil para los que teneis unos buenos conocimientos.

Voy a probar ese código y te diré algo.

pinchoso · #7 (**permalink**) 08/03/2006, 12:19

CAmbia esta funcion, te quedará mejor el resultado:

function hide() {
document.getElementById("ALTdHTML").style.width = "0px";
document.getElementById("ALTdHTML").style.height = "0px";
document.getElementById("ALTdHTML").style.visibili ty = 'hidden';
document.getElementById("ALTdHTML").style.display = 'none';
document.getElementById("ALTdHTML").innerHTML = "";
}

Saludos.

josemgd · #8 (**permalink**) 08/03/2006, 12:40

Tendre que revisarlo más detenidamente, ya que si creo una página sólo con éste código funciona perfectamente, pero si lo meto en una página mia con más cosas no funciona. Tiene algún problema con el menu creado con dhtml menu builder, ya que al quitar el menu si funciona.

josemgd · #9 (**permalink**) 08/03/2006, 12:54

¿Puede ser problema de que el menu funcione con layers?

pinchoso · #10 (**permalink**) 09/03/2006, 02:11

Yo lo tengo funcionando en una página con un menú dhtml y con mas capas y no tengo problema, dejame ver tu codigo y a ver si lo podemos solucionar.

Saludos!

josemgd · #11 (**permalink**) 09/03/2006, 02:33

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
var xm=0; var ym=0;
if(!document.all) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = show;
function crearAlt(texto) {
document.getElementById("ALTdHTML").innerHTML = "<img src='images/canizo.jpg' width='400' height='300'>";
}
function show(evento) {
document.getElementById("ALTdHTML").style.visibili ty = 'visible';
//document.getElementById("ALTdHTML").style.display = 'block';
if(document.all) {
xm = event.clientX;
ym = event.clientY + document.body.scrollTop;
document.getElementById("ALTdHTML").style.left = xm + 10;
document.getElementById("ALTdHTML").style.top = ym + 14;
} else {
xm = evento.clientX + document.body.scrollLeft;
ym = evento.clientY + document.body.scrollTop;
document.getElementById("ALTdHTML").style.left = xm + 10;
document.getElementById("ALTdHTML").style.top = ym + 14;
}
}
function hide() {
document.getElementById("ALTdHTML").style.width = "0px";
document.getElementById("ALTdHTML").style.height = "0px";
document.getElementById("ALTdHTML").style.visibili ty = 'hidden';
//document.getElementById("ALTdHTML").style.display = 'none';
document.getElementById("ALTdHTML").innerHTML = "";
}

</script>
</head>
<body >

</div>
<div id=DMBRI style="position:absolute;">
<img src="/menus/images/dmb_i.gif" name=DMBImgFiles width="1" height="1" border="0" alt="">
<img src="/menus/dmb_m.gif" name=DMBJSCode width="1" height="1" border="0" alt="">
</div>
<script language="JavaScript" type="text/javascript">
var rimPath=null;var rjsPath=null;var rPath2Root=null;function InitRelCode(){var iImg;var jImg;var tObj;if(!document.layers){iImg=document.images['DMBImgFiles'];jImg=document.images['DMBJSCode'];tObj=jImg;}else{tObj=document.layers['DMBRI'];if(tObj){iImg=tObj.document.images['DMBImgFiles'];jImg=tObj.document.images['DMBJSCode'];}}if(!tObj){window.setTimeout("InitRelCode()",700 );return false;}rimPath=_gp(iImg.src);rjsPath=_gp(jImg.src) ;rPath2Root=rjsPath+"../";return true;}function _purl(u){return xrep(xrep(u,"%%REP%%",rPath2Root),"\\","/");}function _fip(img){if(img.src.indexOf("%%REL%%")!=-1) img.src=rimPath+img.src.split("%%REL%%")[1];return img.src;}function _gp(p){return p.substr(0,p.lastIndexOf("/")+1);}function xrep(s,f,n){if(s) s=s.split(f).join(n);return s;}InitRelCode();
</script>
<script language="JavaScript" type="text/javascript">
function LoadMenus() {if(!rjsPath){window.setTimeout("LoadMenus()", 10);return false;}var navVer = navigator.appVersion;
if(navVer.substr(0,3) >= 4)
if((navigator.appName=="Netscape") && (parseInt(navigator.appVersion)==4)) {
document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'nsmenu.js"><\/script\>');
} else {
document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'iemenu.js"><\/script\>');
}return true;}LoadMenus();</script>

<div id="ALTdHTML" style="position:absolute;width:291px;height:138px; top:137px;left:303px;visibility:hidden"></div>
<img src="images/canizo.jpg" width="100" height="75" onMouseOver="crearAlt()" onMouseOut="hide()">
</body>
</html>
__________________

Al añadir el menu, no funciona como podrás comprobar.

pinchoso · #12 (**permalink**) 09/03/2006, 03:30

Tal y como lo tengo ahora mismo no me da error de js. si me pasaras el archivo iemenu.js supongo que podria ver si funciona aunque no conozco este menú.

Saludos.

josemgd · #13 (**permalink**) 09/03/2006, 04:07

Está tal y como lo ha generado dhtml menu builder.

Y como no me deja insertarlo aquí por su tamaño, este es el enlace para que lo puedas descargar

http://www50.brinkster.com/galeriajose/menus/iemenu.js

Como enlace no tiene permiso de acceso, pero si lo tecleas directamente te permite acceder al fichero

pinchoso · #14 (**permalink**) 09/03/2006, 05:32

Bueno, no tengo buenas noticias

...
En cuanto aparece el menú deja de funcionar la capa de la imagen, he provado cambiando los zindex de los divs que te crea el archivo .js, pero no consigo hacer lo que te propuse y no tengo muy claro pq no esta funcionando, puede que alguien pueda acudir a nuestro rescate (hola!! ¿hay alguien ahi?

)...Tunait, Caricatos, KarlanKas..etc.!!.

de no ser así, aunque no sea la mejor opción, ¿te has planteado utilizar otro tipo de menu?? es feo...pero a veces si no puedes con ellos....dale la vuelta. Hay muchos corriendo por ahi y algunos son mucho mas sencillos de lo que ese parece.

en esta página AQUI yo estoy usando un menu (izquierda) que se podria poner en vertical facilmente, y tambien usando la capa de la imagen solo que en este caso es para generar un texto "alt" mejorado (vamos lo que sale en las FAQ). nota:La página esta en desarrollo

y las imagenes que me utilizo estan en distintos tamaños con lo que salen deformadas

, no os asusteis.

Siento no poder ayudarte más, la verdad me da bastante rabia, pero seguiré mirando el código a ver si lo consigo. Tampoco es cuestión de rendirse a la primera.

Saludos.

josemgd · #15 (**permalink**) 09/03/2006, 06:02

La verdad es he dado muchas vueltas hasta dar con un programa sencillo para crear los menus, por lo que me fastidiaría mucho tener que rendirme ahora y tener que deshechar el menu. Estoy seguro de que el problema es muy sencillo de resolver pero hay que dar con ello, ya que si lo que tú propones funciona correctamente sin el menú, tambien ha de funcionar con el menu.

A ver si alguien más nos puede echar una mano, que hasta ahora en éste foro siempre me habeis resuelto todos los problemas.

josemgd · #16 (**permalink**) 09/03/2006, 14:04

Resuelto parcialmente, el problema está en:

document.onmousemove = show

lo he cambiado por

document.onmouseover = show

Ya que sólo me interesa cuando esté el raton encima de una imagen.

Ahora tengo el problema de que quiero que aparezca la nueva imagen por encima del raton en vez de por debajo, siendo el tamaño de las imágenes variables, datos que paso atraves de asp. Pero tengo el problema de que no se como pasar esos datos a la función show.

pinchoso · #17 (**permalink**) 10/03/2006, 09:31

Hola josemgd,

para que salga por encima has de cambiar esta linea;

document.getElementById("ALTdHTML").style.top = ym + 14;
y ponerle un valor negativo, yo he probado con:
document.getElementById("ALTdHTML").style.top = ym - (100 + altura de la imagen); y me sale bien.

Para pasarle el valor a la funcion, si lo haces con ASP lo puedes hacer asi:

document.getElementById("ALTdHTML").style.top = ym - (100 + <%=alturadelaimagen%>);

Veo la luz! jeejej

Un saludo!

josemgd · #18 (**permalink**) 10/03/2006, 10:24

Parece ser que ya vamos viendo la luz.

Muchas gracias por todo.

Ahora iré perfilando un poco la visualización.