cosas para el blog

Hace exactamente dos entradas publiqué como cambiar imágenes al pasar el mouse, pero noté que habia un problema con las imágenes que no son muy pequeñas.. tarda en cargar la segunda imágen.. y aveces tarda tanto que uno ni se da cuenta que al pasar el mouse se cambiaba de imágen... traté de solucionarlo con una precarga de imágenes pero no mejoró casi nada.

La solución y mejora a esto esta en utilizar lo que se llama botón, que no es otra cosa que una imágen con tres funciones:
inactivo: Primera imágen, que aparece
over: Segunda imágen (cuando se coloca el puntero del ratón sobre él)
activo: Tercera imágen (cuando se hace click)


Si bien hablo de tres imágenes el secreto esta en que es una sola, eso es lo que evita que tarde en cargar.

El código para hacer esto sería el siguiente:



<a href="URL IMAGEN" style="background:transparent url(URL IMAGEN) no-repeat left top; width:ANChOpx; /* la mitad o la tercera parte del ancho de la imagen */ height:ALTOpx; /* el alto de la imagen */ display: block; text-decoration: none"
   onmouseout="this.style.backgroundPosition='left top';"
   onclick="this.style.backgroundPosition='right top';"
   onmouseover="this.style.backgroundPosition='center top';">
</a>

El & # 160 ; (sin espacios) supuestamente es para que los navegadores no confundan la etiqueta con una vacia pero no importa, hay que agregarlo antes del </a>
, eso es lo importante a saber

Les dejo un ejemplo de como carga más rápido:
Efecto mouseover con dos imágnes separadas(mas lento, tu explorador no tiene que haber cargado ya esta imagen para notar el efecto):



Efecto boton, con una imagen dividida en tres(mas rapido :-) aparte de evitarnos usar Javascript:






Tambien se puede hacer este mismo efecto con un texto agregado, esto se hace creando un bloque div antes del código.. pero como todavía no lo use les dejo el enlace al blog de J.Miur donde lo ví para el que lo quiera

Sigo con otra entrada sobre efectos en imágenes.

Para ampliarla con un click y reducirla con dos click, de esta forma:



hay que usar este código, reemplazando lo necesario:




<img

src="URL DE LA IMAGEN"

width="ANCHO DE IMÁGEN REDUCIDA"

onclick="javascript:this.height=ALTO IMAGEN AMPLIADA;this.width=ANCHO IMAGEN AMPLIADA"

ondblclick="javascript:this.width=ANCHO IMAGEN REDUCIDA;this.height=ALTO IMAGEN REDUCIDA"/>

Estuve buscando esto bastante rato, sabía que era algo sencillo pero no lo sabia hacer asi que puede que tambien le sirva  a alguien mas..

Lo usé para hacer tipo como un menú en http://expresandome.com.ar, donde se puede acceder a cualquiera de mis blogs :).

El efecto es el siguiente:

Se pueden usar imágenes de diferentes tamaños y formatos

El código es el siguiente:




<img
src="ENLACE DE PRIMERA IMÁGEN" 

onmouseover="javascript:this.src='ENLACE SEGUNDA IMÁGEN';" 

onmouseout="javascript:this.src='ENLAE DE PRIMERA IMÁGEN U OTRA';"/>

Visto en: http://santyweb.blogspot.com/2008/08/ampliar-imgenes-con-mouse.html