Como hacer que un div aparezca con comportamiento onclick?

[itzaliluna]

Hola a todos,
Estoy pensando en añadir más texto a mi página inicial, de cara al posicionamiento de una serie de palabras clave. El caso, es que quiero mantener la imagen inicial lo más limpia posible, por lo que había pensado en añadir un comportamiento y que dicho texto solo apareciera al hacer onclick en la imagen (después de tomarme la molestia espero que google no desprecie dicho texto).

Ya que tengo que hacerlo, había pensado en hacerlo lo mejor posible y de paso que le de cierta utilidad al usuario, que no parezca que está metido con calzador.

Resuminedo, había pensado añadir un comportamiento de la manera siguiente:

<div id="animacion" onclick="MM_effectAppearFade('animacion_pie', 1000, 0, 100, false)"><img src="Imagenes/asga_arquitectos_bilbao.jpg" width="960" height="355" alt="Imagen inicial de ASGA Arquitectos Bilbao" /></div>

El div "animacion" es la imagen principal y al pulsar en ella parece lentamente el "animacion_pie" oscureciendo parte de la imagen y con un texto.

El comportamiento funciona correctamente, lo que pasa es que al carga la página, el div "animación_pie" se ve y me gustaría que estuviera oculto y que solo se mostrara si se hiciera click.

Podéis comprobar a lo que me refiero en la página http://www.asga-arquitectos.com/

No sé si la solucón pasa por hacer una combinación de comportamiento, o salgo por el estilo.

Gracias y un saludo

[deirdre]

Hola itzaliluna

Si te he entendido bien, sólo añade la cualidad visibilidad de esta forma:

Código HTML:

#animacion_pie {
	width:960px;
	height:30px;
	z-index:2;
	padding-left: 10px;
	position: absolute;
	top: 495px;
	left: 0px;
	visibility: hidden; /*este es el añadido necesario*/
}

Saludos

[itzaliluna]

Ok, funciona perfectamente, mira que no ocurrirseme...



Lo que no consigo ahora es quecuando pase por encima de la foto sobre la que hay que pinchar para que salga el pie de foto, me cambie el puntero del ratón por un dedo para que la gente sepa que se puede pinchar ahí. Aunque no tenía pensado ponerlo así en un principio, sería interesante saber como se hace.

Gracias, saludos

[Adermall]

Para cambiar el cursor solo añade a tu CSS

#animacion img { cursor:pointer; }

Y listo ;)

[itzaliluna]

Gracias lo probaré mañana.

Entiendo que con #animación img , se refiere a todas las imagenes que hay dentro del div animación, supongo que en este caso como solo hay esa imagen dentro del div puedo aprovechar y ponerle directamente #animacion {cursor:pointer;} y aprovecho el elemento id (no me acuerdo si se les lama así) del css que ya tengo.

Un saludo y gracias