Mostrar y ocultar información en una capa al pasar el ratón
El otro día me llegó un mail de una persona que me pedía ayuda para poder hacer una función javascript que le permitiera mostrar y ocultar información en una capa cuando ponía el ratón sobre ella o no (respectivamente)
Para ello, desde mi punto de vista, se puede hacer con el método innerHTML, que no es muy querido por algunos debido a su implicación con Microsoft, pero para nuestro ejemplo nos servirá perfectamente.
Lo primero será crearnos la capa en la cual cambiaremos el contenido cuando pasemos el ratón.
<div id="nombre_capa" ></div>Lo siguiente será crearnos el elemento que provocará, al pasar sobre él, que se muestre u oculte la información:
<img src="imagen.jpg" onmouseover="javascript:mostrar()" onmouseout ="javascript:ocultar()" />Ahora crearemos ambas funciones javascript que utilizando el método innerHTML modificarán el contenido de la capa “nombre_capa”
<script language="JavaScript">
function mostrar() {
nombre_capa.innerHTML="Texto a mostrar";
}
function ocultar() {
capa.innerHTML=""
}
</script>Y con esto ya tenemos montado un sistema sencillo para mostrar / ocultar texto en una capa al pasar el ratón por cualquier elemento de nuestra página.
Comparte este artículo
Trackbacks / Pingbacks
15 Comentarios
Deja un comentario
Email de una persona??? Quizá me equivoque pero, esa persona es familiar tuyo????
Escrito el 28/08/08 a las 08:35:04 (#1) ( responder)
Ummm no, ¿por qué lo dices?
Escrito el 28/08/08 a las 09:16:50 (#2) ( responder)
Pues si, putas capassssssssssssssssssssssssssssss
Escrito el 28/08/08 a las 09:58:36 (#3) ( responder)
Jajaja es lo mejor para maquetar una página… :p
Escrito el 28/08/08 a las 10:03:58 (#4) ( responder)
Jajajajajajajaajajajajajajaajajajajajaja.
Escrito el 28/08/08 a las 13:52:00 (#5) ( responder)
Escrito el 28/08/08 a las 14:39:11 (#6) ( responder)
Para los aficionados al fade-effect, podemos mostrar y ocultar capas, imágenes, etc. con éste sencillo script. Lo construí como “reto” que, con 1Kb. se puede hacer lo mismo que hacen los desarrollos mastodónticos: Mootools, JQuery, y otras JS-Libraries.
<script language=”javascript” type=”text/javascript”>
<!–
opac=0
goIn=null
function fade(dir){
if(document.all){document.all(”fadimg”).filters.alpha.Opacity=opac}
if(document.getElementById && !document.all){document.getElementById(”fadiv”).style.MozOpacity=(opac/100)-0.01}
if(document.getElementById && !document.all){document.getElementById(”fadiv”).style.KHTMLOpacity=(opac/100)-0.01}
if(document.getElementById && !document.all){document.getElementById(”fadiv”).style.opacity=(opac/100)-0.01}
if(dir==1 && opac=0){opac=opac-2} else{clearTimeout(goIn)}
goIn=setTimeout(”fade(’” + dir + “‘)”, 10)
}
// –>
</script>
<a href=”#” onmouseover=”fade(’1′)” onmouseout=”fade(’0′)”>EFECTO</a>
<div id=”fadiv” style=”filter:alpha(Opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;visibility:visible”>A Q U I E L C O N T E N I D O . . .</div>
No sé si me he saltado algún detalle. Pero está muy probado: IExplorer, Firefox, Netscape, Safari, Avant, etc. ¡Vá de cine, con perdón!.
P.D.:
He improvisado una variante básica, sin apenas variables, etc. para un perfecto entendimiento.
Es la primera vez que se publica para Foros, Blogs, etc.
Escrito el 26/09/08 a las 20:22:36 (#7) ( responder)
El detalle es que se me olvida que el Blog bloquea las etiquetas abrir cerrar HTML; en éste caso, utilizadas como Operadores Condicionales: Mayor igual , Menor igual. El error está donde aparece:
if(dir==1 && opac=0){opac=opac-2} else{clearTimeout(goIn)}
debes sustituirlo por:
if(dir==1 && opac<=100){opac=opac+2} else{clearTimeout(goIn)}
if(dir==0 && opac>=0){opac=opac-2} else{clearTimeout(goIn)}
Disculpas a todo el mundo.
Escrito el 26/09/08 a las 21:10:01 (#8) ( responder)
Interesante la función… y lo que más me gusta es su tamaño, la verdad es que estoy contigo que mootools, jquery y demás suelen ser bastante pesadas. En cuanto tengo un ratinín me gustaría probarla.
Escrito el 26/09/08 a las 22:52:20 (#9) ( responder)
Con la prisa no he verificado algunos aspectos: darle tamaño al DIV, es muy importante para evitar que quede fuera el contenido; en el primer id del objeto puse (”fadimg”) y es (”fadiv”). También la interpretación que hace el Standard charset=UTF-8 de los signos, acentos, comillas, etc. Por tanto, es preciso avisar que, al copiar el script pueden haber errores. En culaquier caso, puedo envíar una copia funcinando al que la precise.
Aquí dejo la versión que hice para una Imagen.
El script:
opac=0
goIn=null
function fade(dir){
if(document.all){document.all(”fadimg”).filters.alpha.Opacity=opac}
if(document.getElementById && !document.all){document.getElementById(”fadimg”).style.MozOpacity=(opac/100)-0.01}
if(document.getElementById && !document.all){document.getElementById(”fadimg”).style.KHTMLOpacity=(opac/100)-0.01}
if(document.getElementById && !document.all){document.getElementById(”fadimg”).style.opacity=(opac/100)-0.01}
if(dir==1 && opac<=100){opac=opac+2} else{clearTimeout(goIn)}
if(dir==0 && opac>=0){opac=opac-2} else{clearTimeout(goIn)}
goIn=setTimeout(”fade(’” + dir + “‘)”, 10)
}
La imagen:
img src=”imagen.gif” alt=”Imagen” title=”Imagen” width=”200″ height=”200″ id=”fadimg” style=”filter:alpha(Opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;visibility:visible”
En el Foro de Informática http://foro.aesinformatica.com/index.php/topic,146.0.html está disponible el código completo.
Espero vaya todo bien.
Escrito el 27/09/08 a las 12:44:41 (#10) ( responder)
Gracias por la corrección y por postearlo en el foro, allí es más sencillo introducir código..
Escrito el 27/09/08 a las 14:46:37 (#11) ( responder)
Otra cosa, para los que siguen el hilo del Fade-Effect. La segunda parte del rompecabezas es animar imágenes (tamaño) con efecto progresivo, sigan en el Foro http://foro.aesinformatica.com/index.php/topic,147.0.html para acabar construyendo un Mini-Light-box, SlideShow, u otra galería de imágenes personalizada. Eso sí, de unos 4Kb. aprox. efectos incluidos. Ironías aparte; disculpen las molestias por la ortografía; y por la redirección: ufffffffff, que cansancio!. Esto de querer escribir igual (de mal) que hablo y/o pienso, ironías incluidas, esta vez sí; me pierden.
Seguiremos…
Escrito el 27/09/08 a las 19:19:59 (#12) ( responder)
Es genial que todo termine ocupando tan solo 4 kb!
Escrito el 28/09/08 a las 03:41:40 (#13) ( responder)
me gusta el minitutorial intentare seguirlo
Escrito el 28/09/08 a las 12:01:56 (#14) ( responder)
Me agrada saber que pueda interesar el tema. Seguiremos con él, y con otras ideas que aportéis.
Un saludo.
Escrito el 28/09/08 a las 12:41:15 (#15) ( responder)