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.
Email de una persona??? Quizá me equivoque pero, esa persona es familiar tuyo????
Ummm no, ¿por qué lo dices?
Pues si, putas capassssssssssssssssssssssssssssss
Jajaja es lo mejor para maquetar una página… :p
Jajajajajajajaajajajajajajaajajajajajaja.
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.
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.
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.
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.
Gracias por la corrección y por postearlo en el foro, allí es más sencillo introducir código..
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…
Es genial que todo termine ocupando tan solo 4 kb!
me gusta el minitutorial intentare seguirlo
Me agrada saber que pueda interesar el tema. Seguiremos con él, y con otras ideas que aportéis.
Un saludo.
oO’
¿Y no es más fácil una regla CSS para navegadores avanzados y el DOM para el resto??. Por supuesto que no nos gusta innerHtml estando el DOM, ni marcado intrusivo en la estructura de un documento ¬¬ …
CSS: Aunque tampoco es demasiado semántico añadir texto oculto.
#myDivHover span {display:none;}
#myDivHover:hover span {display:inline/block;}
XHTML:
Texto oculto
Igualmente y es válido para todos es aplicar a todo el ancho del div un ancla:
#myDivHover {width:100%; height:10em;}
#myDivHover span {display:none;}
#myDivHover a {display:block; line-height:10em; height:10em;}
#myDivHover a:hover span {display:block/inline;}
XHTML:
Click meTexto oculto
…eso, así a bote pronto.
Y luego con el DOM… pues igual de sencillo:
var myActivate = document.getElementById(‘eventElm’);
myActivate.addEventListener(‘mouseover’, function () { document.getElementById(‘hiddenText’).style.display = ‘block’; }, true);
myActivate.addEventListener(‘mouseout’, function () {document.getElementById(‘hiddenText’).style.display = ‘none’; }, false);
Y todo lo tenemos donde tiene que estar y hecho como se tiene que hacer ^^!
Un saludo
@Covi: Pues tienes toda la razón, no es el código más óptimo y si tuviera que volver a hacerlo tendría más en cuenta el DOM.
De todas maneras, supongo que la inmensa mayoría que entra en este artículo es gente con pocos conocimientos de estos “lenguajes” por lo que creo que de esta manera es más intuitivo y sencillo de entender.
Muchas gracias por los ejemplos, siempre se agradecen otras opiniones y más aún cuando aportan mejoras
Una preguntita….
Se puede usar esta funcion….. para que aparezca un cartelito cuando pasa el mouse por encima de un TEXTBOX???
Gracias por la respuesta.