Privacidad: Recuerde que la información escrita en los foros de programación es 100% pública y que su ip será registrada asociada a su mensaje. Si encuentra un mensaje fuera de lugar, por favor, notifiquelo para su revisión y eliminación.
nuevo layer al pasar por un link
Enviado por pontxld el día 13 de abril de 2005
Hola gente,
Siento estar todos los dias con una nueva duda, pero soy nueva en esto y mis practicas dependen de ello. Me han dicho ahora que saque el efecto que aparece en esta pagina cuando pasas por los links que hay en el texto: http://www.k-hardware.de/news.php?s=&news_id=3...
He estado mirando por aqui y otras partes y la verdad que no se me ocurre y viendo el codigo del que haya hecho la pagina tampoco veo la luz, asi que si alguien puede ayudarme estare eternamente agradecida, y si al final lo descubro yo pondre la solucion, no preocuparse.
Gracias por adelantado,
Un saludito!
Te equivocas, lo cierto es que si son links, pero bueno, eso es lo de menos.
La verdad es que es una funcionalidad interesante la que aparece en esa pagina.
Si te quieres limitar a que aparezca el cuadro explicativo al posicionar el puntero encima de algun elemento, la idea geneal es, mas o menos, sencilla.
Tienes que crear los cuadros explicativos como capas. Les das un identificador unico a cada uno, el valor "hidden" a la propiedad "visibility", y el valor "absolute" a la propiedad "position". Debes indicar propiedades "top" y "left", aunque no importa que valores les des porque se modificaran luego en tiempo de ejecucion. Ademas pondras propiedades "width", "height" especificando tamaño del cuadro y cualquier otra que desees para fijar su aspecto (colores, tipo y estilos de fuentes, cursor, etc).
Digamos que la cosa seria algo asi:
<div id="capa1" style="visibility:hidden; position:absolute; top:0px; left: 0px; width:80px; height:100; background-color: rgb(234,234,234);">
Contenido del cuadro explicativo.
</div>
Ahora para cada elemento que debe tener asociado uno de estos cuadros explicativos tienes que gestionar sus eventos onMouseOver, para mostrar el cuadro explicativo, y onMouseOut, para ocultarlo.
Digamos que la cosa seria algo asi:
<span onMouseOver="showDiv(1)" onMouseOver="hideDiv(1)">palabra con explicacion</span>
El argumento de los gestores de evento showDiv y hideDiv sirven, como te puedes imaginar, para identificar cual cuadro hay que mostrar u ocultar.
La funcion "showDiv" obtiene gracias al parametro una referencia a la capa.
A esa capa le asigna unas coordenadas a traves de las propiedades "top" y "left", y la hace visible cambiando el valor de la propiedad "visibility" a "visible".
Digamos que la cosa seria algo asi:
function showDiv(numDiv) {
var cuadro = document.getElementById("capa"+numDiv);
with (cuadro.style) {
top = document.body.scrollTop + 40;
left = 50;
visibility = "visible";
}
}
La funcion "hideDiv" obtiene gracias al parametro una referencia a la capa.
Simplemente oculta esa capa asignando el valor "hidden" a su propiedad "visibility".
Digamos que la cosa seria algo asi:
function hideDiv(numDiv) {
var cuadro = document.getElementById("capa"+numDiv);
cuadro.style.visibility = "hidden";
}
El codigo que he puesto esta muy simplificado, los cuadros siempre aparecen en la misma posicion, no he tenido en cuenta posibles variantes segun navegador (yo uso IE), etc...
Espero, no obstante, que te haya servido de ayuda. Y en tal caso no es necesario que me estes eternamente agradecida.
Con que lo estes dos o tres centenares de años sera suficiente... ;-p
Nota:: para marcar los elementos que tienen cuadro explicativo asociado he empleado etiquetas "span" por ser las mas neutras e inocentes, pero podrian ser cualquie cosa... enlaces, celdas de tablas, titulos, lo que sea...
Lo importante es asociar a los elementos las funciones "showDiv" y "hideDiv" a sus eventos
"onMouseOver" y "onMouseOut" respectivamente.
Por ejemplo esto tambien valdria
<b onMouseOver="showDiv(1)" onMouseOut="hideDiv(1)">ver cuadro</b>
Aunque, si quieres que esos elementos tengan un aspecto especial determinado, lo suyo seria asignarles una clase y definir atributos para esa clase.
Fe de erratas: En el post anterior donde pone
onMouseOver="hideDiv
debe poner
onMouseOut="hideDiv
Re: Re: Re: Re: Re: Re: Re: nuevo layer al pasar por un link
Enviado por pontxld el día 15 de abril de 2005
bueno, y si quiero ponerlo en la esquina inferior derecha tendria que cambiar lefto por right y top por bottom?document.body.scrolltop tambien? Son caprichosos los ninios y no consigo ponerlo ahi
Hola estoy interesado en este tema de layer al pasar por link pero la verdad no lo entendi muy bien podrias hacerme el favor de explicar en ke instancias va es decir si va entre head si es un javascript y o si va en el body ke pena la pregunta Gracias
Foros de debate
Javascript
