Quiero que mi logotipo principal cambie cuando pase el mouse.¿La mejor manera de hacer rollovers de imágenes?
Entiendo que hay varias formas de lograrlo, y me preguntaba cuál es la mejor forma de mantener la estabilidad, la compatibilidad del navegador, la eficiencia y la facilidad de configuración.
Algunas maneras que he encontrado son:
más? ¿Qué es lo mejor?
Para las imágenes de contenido-ful, que desea tener la src en el formato HTML. Desea utilizar la solución de Javascript y colocar la imagen de sustitución en un atributo.
Para elementos de IU con imágenes sin contenido, especialmente los que son comunes en todo el sitio o duplicados, una solución CSS directa sería la mejor (para que no tenga que volver a declarar las ubicaciones de las imágenes en cada invocación). Entre las soluciones de CSS, los sprites son los mejores ya que no requieren sobrecarga de precarga.
HTML:
<img src="/img/one.jpg" data-rollover="/img/two.jpg" />
En jQuery:
$(function(){
$('img.rollover').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */
});
aplicación de la muestra: http://jsfiddle.net/dtPRM/1/
Beneficios: Es fácil; que tiene sentido; funciona con un marcado adicional mínimo una vez que haya configurado su biblioteca.
Desventajas: Requiere Javascript y gastos generales de carga de la biblioteca jQuery.
Probablemente la mejor opción. Si su usuario usa un navegador donde las renovaciones son relevantes (probablemente el caso), tienen las capacidades de Javascript para ejecutar esta opción. Las personas que intencionalmente han desactivado el Javascript por algún motivo lo detectarán si deja una pequeña nota al <noscript> diciendo que es posible que no obtengan el conjunto de características completo.
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 300px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-position: top right;}
aplicación de la muestra: http://jsfiddle.net/dtPRM/5/
En lo personal, creo que por las imágenes de contenido-ful, esta es una opción aún peor que la solución de CSS + dos imágenes de fondo en. Está separando el marcado HTML del valor semántico de la pantalla.
Sin embargo, si utiliza imágenes sin contenido como elementos de interfaz de usuario, esta es la mejor solución en mi opinión.
Otra opción CSS está disponible que no implique imágenes de fondo (preferido entre las soluciones de CSS si usted quiere tener las etiquetas de imagen en el código HTML, como por imágenes semánticamente significativos) .
<div class="rollover">
<img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
<img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>
CSS (utilizo el pseudo-selector de :not aquí, pero es bastante fácil de evitar su uso; también creo que tengo los nombres de las clases semánticamente al revés): aplicación
div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}
muestra: http://jsfiddle.net/dtPRM/2/
Beneficios: Semantically sensible en comparación con la solución CSS anterior de poner toda la información en la hoja de estilos.
Desventajas: Marcación extraña necesaria.
Comentario: Éste puede precargarse automáticamente según lo requiera el navegador.
Resultado final: Una buena inversión si la opción (1) no está disponible porque absolutamente necesita compatibilidad con IE2 o soporte no JS.
Lo menciono sólo porque usted lo mencionó en la pregunta. No lo usaría
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 600px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-image: url('http://dummyimage.com/600x400/fff/000');}
aplicación de la muestra: http://jsfiddle.net/dtPRM/4/
Beneficios: Ampliamente compatible; todo lo que necesitas para apoyar es imágenes de fondo y flotar.
Desventajas: Semánticamente extraño poner imágenes en CSS y centralizarlas allí. Hace las modificaciones futuras más difíciles. Dicho esto, si tiene un escenario que justifica una imagen de sustitución, existe una buena posibilidad de que sea una imagen no contenida (por ejemplo, un elemento UI), en cuyo caso CSS sería semánticamente (quizás) aún más adecuado que una imagen regular Ver la nota en los sprites a continuación.
Otras desventajas: Tendría que tener cuidado de declarar la altura y el ancho de la imagen (una buena práctica de todos modos, pero puede ser engorroso cuando solo quiere hacer cosas). Los usuarios que ven en los navegadores móviles que pueden tratar imágenes de fondo CSS inusualmente.
inconvenientes aún más: Si desea estratificar un preloader en la parte superior de la misma, que vas a estar usando Javascript y la selección de alguna manera los elementos de vuelco-poder, y en ese caso, es posible que así el uso de JavaScript para todo.
Resultado final: No lo utilice para obtener imágenes con contenido completo. Si debe mantenerse alejado de Javascript, use sprites para los elementos de la interfaz de usuario y la solución alternativa para imágenes semánticamente significativas.
A partir de jQuery 1.4.3, puede acceder a los atributos 'data-' de HTML5 con '.data()'. http://api.jquery.com/data – nyuszika7h
Gracias por esta buena descripción. Utilicé ** ** La solución CSS: También está bien "** por su simplicidad de edición (ambas URL en un solo lugar) y por ser compatible con _retina.js_ (que cambia en imágenes de alta resolución para todas las etiquetas img). Pero resulta que esta solución tiene errores en los dispositivos táctiles: si el enlace-img está vinculado, el enlace no siempre se sigue, cuando se toca. Así que desactivé el movimiento de los dispositivos táctiles, ya que de todos modos no tiene sentido. (Usé [esto] (http://stackoverflow.com/a/13470899/1060128) detección) – johjoh
Debe utilizar una regla CSS :hover.
CSS de lejos. Aunque es posible que desee precachear su imagen con javascript.
vuelcos imagen utilizando 'sprites' List a part - sprites CSS
CSS utilizando fondos y "flotar"
Use sprites CSS, en otras palabras, se combinan las dos imágenes en una sola y luego usar CSS :hover para desplazar la imagen.
Una ventaja del uso de CSS es que funcionará incluso si JavaScript está desactivado.
Una de las ventajas del uso de una sola imagen es que evitará la solicitud HTTP adicional.
Ver: http://css-tricks.com/css-sprites/
Herramientas para ayudar a generar la imagen y CSS:
$('#div1').hover(function(){
this.style.color='white';
},function(){
this.style.color='black;
});
o
$('#div1').onmouseover()...
$('#div1').onmouseout()...
#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}
Utilizar una imagen como esta:
Nota: Evitar JS reemplazos de imagen como se incurrirá en un tiempo de carga de la imagen corta si las imágenes no se almacenan en caché antes.
Espero que esto ayude hermano!
W.
Las imágenes de css tampoco están precadenadas, especialmente en IE –
Cuando está usando un sprite, el navegador carga toda la imagen de sprite (suponiendo que el elemento que lo requiere esté visible). Aquí está, por lo que la porción mouseover está cargada, aparentemente dando como resultado la precarga. –
¿Qué tipo de elemento debería ser '# btn' para las mejores prácticas? ¿Un 'div' sin nada en él? – AP257
sprites uso de CSS y el: hover pseudo-clase en el CSS.He aquí por qué:
conmutación fuente de la imagen, ya sea a través de JS oa través de la CSS provocará un "abrir y cerrar" en el primer ratón por encima, mientras que la nueva imagen es descargado por el navegador. Si usa el sprite, es solo una imagen que cambia de posición, por lo que no parpadea.
Una sola imagen reduce las solicitudes HTTP, haciendo que la carga del sitio sea más rápida en general.
Funciona si el usuario tiene JavaScript deshabilitado.
Es compatible con todos los tipos de navegador (de todos modos, el escritorio, navegadores de teléfono sin un: el estado de desplazamiento no cuenta para esto).
Más información: http://css-tricks.com/css-sprites/
Creo que esto debería ser wiki-ed. Es una pregunta bastante común y una buena para saber cómo responder para el codificador frontend intermedio. Además, pide la "mejor" solución para algo que tiene muchas soluciones según las circunstancias. –