Botones con imágenes. (Cambiar imagen al pasar el mouse y al hacer click)
Publicado por Uno mas del monton en 11:21
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:
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
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
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 saberLes 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
Suscribirse a:
Enviar comentarios (Atom)
LinkWithin
Hola!!, que buena solución. Pero te faltan las diagonales que cierran(/)
lo demás esta perfecto xD
Gracias.
Hola que tal muy bueno tu blog "hacker on the web", de tu blog aprendí lo de la entrada anterior lo que me llevo a aprender esta, ya que en la lista de mis blogs http;//expresandome.com.ar/ tardaba siglos en hacer el efecto..
entrada por entrada se pagan los favores xD si no nos ayudamos entre nosotros entonces que xD
Lo de las barras no se que tienen que cerrar, ¿seran los comentarios en medio del código?
Saludos
hola soy nuevo en blogger i fue una buena idea de todo esto si quereis os dejo un hueco para que os agais seguidores i me dejeis comentari como siempre digo un comentario una ilusion
con cariño piter pan
Gracias peter, me pasé por tu blog, pero paso de seguirte xD
no me sale el del pinguinito ... me qeda por la mitad
no se que decir estaría bueno que me la muestres para que te indique el error, supongo que las dimensiones de la imagen no son las correctas
capaz que era el problema que decia Santy al principio ahi vi las barras q faltaban en los comentarios y las agregué