nuevo layer al pasar por un link
pontxld
19 de Mayo del 2006
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=3980
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!
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=3980
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!
pontxld
19 de Mayo del 2006
Perdon, de hecho no son links, es el texto que esta rojo en el texto, que abre un nuevo layer al pasar por encima, cada vez estoy mas perdida... :S
Jorge
19 de Mayo del 2006
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
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
pontxld
19 de Mayo del 2006
Muchas gracias Jorge, voy a mirar si me sale y sino pues dare un poco mas la txapa para encontrar soluciones.
Agur!
Agur!
pontxld
19 de Mayo del 2006
bueno, bueno, bueno... funciona en mozilla pero no en el explorer, ya empezamos! en fin ya haremos algo, jejeje
pontxld
19 de Mayo del 2006
Pues ala, parece que hago monologos... ya funciona, era un problema de seguridad del explorer, asi que esta hecho! graciassssssssss
Jorge
19 de Mayo del 2006
De nada.
Jorge
19 de Mayo del 2006
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
Inconvenientes de abusar del copy&paste :-D
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
Inconvenientes de abusar del copy&paste :-D