El uso de sprites con la etiqueta IMG?

StackOverflow https://stackoverflow.com/questions/4335957

Pregunta

entiendo cómo utilizar sprites, sin embargo, no es un atributo "src" requerido para las etiquetas IMG? Siempre podía utilizar una u otra etiqueta SPAN y establecer el fondo / anchura / etc pero no va a ser semánticamente correcta.

Básicamente, me gustaría omitir el SRC de una etiqueta IMG y el uso de sprites solo, pero preocupa el HTML no ser técnicamente válida a causa de ella. Gracias.

¿Fue útil?

Solución

Sobre la corrección semántica:

Cuando una imagen tiene un significado semántico, por lo que es considerado como el contenido, utilizar una etiqueta IMG , sin sprites, y configurar correctamente ALT.

Cuando una imagen es sólo decoración, como el fondo de una caja, fondo de un botón, fondo de una opción de menú, etc., no tiene ningún significado semántico, lo que sólo puede utilizarlo como un fondo de un SPAN, DIV, etc de CSS. Puede utilizar los sprites en este caso.

Otros consejos

El uso de sprites no significa necesariamente que necesita para definirlas en fondos css. También puede utilizar sprites etiqueta IMG, para ello es necesario básicamente recortar su imagen. Hay dos buenos artículos que explican esa técnica:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites- de alto contraste /

Ambos métodos CSS e IMG seguro tiene sus propios beneficios, por lo que tiene que averiguar cuál se adapta mejor.

I utilizar un gif transparente 1x1 (llamado spacer) para el src. a continuación, la imagen de fondo para que la etiqueta img con la posición bg correspondiente. De esta manera usted está utilizando la velocidad de sprites y mantener la semántica de su código (todavía se puede utilizar el atributo alt)

  

Siempre podría usar una u otra etiqueta SPAN y establecer el fondo / anchura / etc pero no va a ser semánticamente correcta

En realidad no hay nada malo sobre el uso de CSS para definir el fondo de un palmo o div. En realidad, sería sintácticamente incorrecto omitir el src de una imagen, ya que es el punto central de la etiqueta. No hay nada en las normas diciendo que tiene que poner el texto dentro de un palmo. Sintácticamente hablando, modificando el fondo de un elemento sería la forma más "correcta" de hacerlo.

Aquí está el árbitro en las etiquetas img en el W3C sobre: ?? http : //www.w3.org/TR/html401/struct/objects.html#h-13.2

Y un poco más de lectura: http: // www.w3.org/TR/html4/struct/global.html#h-7.5.3

  

Estos elementos definen contenido a ser en línea (SPAN) o a nivel de bloque (DIV), pero no imponer otros idiomas de presentación en el contenido. Por lo tanto, los autores pueden usar estos elementos en conjunto con las hojas de estilo, el atributo lang, etc., a medida HTML a sus propias necesidades y gustos.

También se puede usar CSS fondos, o HTML lienzo elementos dinámicamente a recurrir. Con la lona de las que tiene la capacidad de imágenes fácilmente subconjuntos y realizan efectos de modos de mezcla .

a resolver esto mediante la re-pensar sus opciones.

Se crea un área definida con un <a> con display:block; o <div> y el uso overflow hidden; a ocultar el desbordamiento y position:relative;.

A continuación, se colocan las <img> imagen de sprite en el interior con posición absoluta, que es posible ya que se colocará el padre.

A continuación, utilice :hover en la imagen para cambiar de posición.

Ahora tu sprite se basa en una etiqueta img, para que pueda utilizar su texto alt.

ejemplo Después se basa en un sprite Facebook con dos versiones del icono en la parte superior de la otra, cada una 50px por 50px, la altura total de la imagen siendo 100px: 

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top