TEMARIO

domingo, 16 de octubre de 2011

AMPLIAR IMAGENES AL PASAR EL RATON O HACER CLICK

Hay que tener claro que las imagenes en las que queremos realizar el efecto tienen que estar alojadas en un servidor de imágines, uno de estos servidores puede  esta,  http://es.tinypic.com/, se copiaría la dirección que se genera, en el script donde pone "url imagen", que podrían ser estas (preferiblemente la 1ª por tamaño)  http://i55.tinypic.com/2zokd50.jpg , http://i52.tinypic.com/15wjoex.jpg 




Para ampliar la imagen al pasar el mouse:


Hay que usar este códidgo:
<img src="URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />

1.   "this.width=400;this.height=300;"  > Indica el ancho (width) y el alto (height) de la imagen cuando el cursor está encima de la imagen (Cambialo por las medidas de la imagen original).


2.  "this.width=200;this.height=150;" width="200" height="150" > Indica el ancho (width) y el alto (height) de la imagen cuando el cursor está fuera de la imagen (Cámbialos por las medidas que desees, para que quede mas pequeño que la original).


3. Y por supuesto, cambia URL DE LA IMAGEN, por la dirección correspondiente.


4. También puedes cambiar (aunque no es obligatorio), onmouseover, por onclick, por ejemplo, consiguiendo asi que la imagen se aumente al pinchar sobre ella.





No hay comentarios:

Publicar un comentario