El codigo es el siguiente:
<img src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />
Muy sencillo de hacer ( yá verás el resultado al final de éste post), solo tienes que colocar la direccion de la imagen que vas a utilizar reemplazando donde dice URL de la imagen (debes reemplazar pero no debes borrar las comillas. Ojo al piojo que si no no te saldrá nada).
Cómo se hace?
Te doy la más fácil.
Busca en el google alguna imagen que quieras usar.
Copias la direccion de ésa imagen posicionando el cursor sobre ella y apretando el boton derecho vas a Copiar direccion de la imagen y haces click nuevamente.
Ahora vas y pegas la direccion sobre el código del que te hable anteriormente. (reemplaza, borra donde dice Url de la imagen) (Pegas con boton derecho: Pegar)
Sigamos con el código.
El width (ancho) y height (alto) que ves primero corresponde al tamaño que tendrá la imagen cuando pases el cursor por encima.
Los width (ancho) y height (alto) en color celeste son el tamaño de la imagen cuando está pequeña.
Si quieres variar los tamaños para hacerlos más chicos o más grandes anímate a hacerlo, no tengas miedo.
Yo así aprendo.
Voy a utilizar éste código como base para hacer un menu para mi blog, pero éso será más adelante.
Acá te dejo ejemplos de como utilizar éste html sencillo, que segun tu imaginacion puedes lograr cosas sorprendentes.
Usalo en alguna entrada con una imagen y sorprende a tus visitantes.
CODIGO PARA INICIO
<img height="80" onmouseout="this.width=100;this.height=80;" onmouseover="this.width=400;this.height=300;" src="http://www.seocharlie.com/blog/wp-content/uploads/2008/07/rss.png" width="100" />
CODIGO PARA FACEBOOK
<img height="80" onmouseout="this.width=100;this.height=80;" onmouseover="this.width=400;this.height=300;" src="http://www.0vello.com/images/stories/botones/boton_facebook.jpg" width="100" />
CODIGO PARA INICIO
<img height="80" onmouseout="this.width=100;this.height=80;" onmouseover="this.width=400;this.height=300;" src="http://mural.uv.es/hermaca/th_boton%20inicio%202.gif" width="100" />
CODIGO PARA TWITTER
FIJATE QUE ACÁ VARÍO LAS MEDIDAS DE LOS HEIGHT Y WIDTH. LA IMAGEN SE ACHICA. TENGAN EN CUENTA LAS PROPORCIONES.
<img height="40" onmouseout="this.width=60;this.height=40;" onmouseover="this.width=200;this.height=150;" src="http://gootwitter.com/wp-content/uploads/top-100-usuarios-twitter-espana-1.jpg"
width="100" />
Espero lo entiendas. Y si no consulta con tu médico. jajajaja. Solo preguntame y trataré de responderte.
 |
