html - tag - ¿Usando sprites con etiqueta IMG?
img src align html (6)
Siempre podría usar un SPAN u otra etiqueta y establecer el fondo / ancho / etc, pero no será semánticamente correcto
En realidad, no hay nada de malo en usar CSS para establecer el fondo de un tramo o div. Sería realmente sintáctico incorrecto omitir el src de una imagen, ya que ese es el punto entero de la etiqueta. No hay nada en los estándares que diga que tiene que poner texto dentro de un lapso. En términos sintácticos, modificar el fondo de un elemento sería la forma más "correcta" de hacerlo.
Aquí está el ref en img etiquetas en W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2
Y una pequeña lectura adicional: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
Estos elementos definen el contenido como en línea (SPAN) o de nivel de bloque (DIV) pero no imponen ningún otro lenguaje de presentación en el contenido. Por lo tanto, los autores pueden usar estos elementos junto con las hojas de estilo, el atributo lang, etc., para adaptar el HTML a sus propias necesidades y gustos.
Entiendo cómo usar sprites, sin embargo, ¿no se requiere un atributo "src" para las etiquetas IMG? Siempre podría usar un SPAN u otra etiqueta y establecer el fondo / ancho / etc, pero no será semánticamente correcto.
Básicamente, me gustaría omitir el SRC para una etiqueta IMG y usar solo sprites, pero me preocupa que el HTML no sea técnicamente válido por eso. Gracias.
Puede usar fondos CSS o elementos de lienzo HTML para dibujar dinámicamente. Con Canvas''s tienes la capacidad de subordenar imágenes fácilmente y realizar efectos de modo de fusión .
Resuelves esto repensando tus opciones.
Crea un área definida con una <a> con display:block; o <div> y usar el overflow hidden; para ocultar el desbordamiento y la position:relative; .
Luego, coloca el sprite de imagen <img> en posición absolutamente posicionada, lo cual es posible desde que posicionaste al padre
Luego use :hover el :hover sobre la imagen para cambiar de posición.
Ahora tu sprite está basado en una etiqueta img, así que puedes usar tu texto alt .
El siguiente ejemplo se basa en un sprite de Facebook con dos versiones del icono una encima de la otra, cada una de 50 px por 50 px, y la altura total de la imagen es de 100 px:
<!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>
Sobre la corrección semántica:
Cuando una imagen tiene un significado semántico, por lo que se considera contenido, use una etiqueta IMG , sin sprites, y una ALT configurada correctamente.
Cuando una imagen es solo una decoración, como el fondo de un cuadro, el fondo de un botón, el fondo de una opción de menú, etc., no tiene un significado semántico, por lo que puede usarla como fondo de un SPAN, DIV, etc. . desde CSS. Puedes usar sprites en este caso.
Usar sprites no significa necesariamente que necesites definirlos en fondos css. También puede utilizar sprites de etiquetas IMG, para ello necesita 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-high-contrast/
Tanto los métodos CSS como los IMG tienen sus propios beneficios, por lo que necesita descubrir cuál le conviene mejor.
Uso un gif transparente de 1x1 (llamado espaciador) para el src. luego configure la imagen de fondo para esa etiqueta img con la posición bg correspondiente. De esta manera, está utilizando la velocidad de los sprites y manteniendo la semántica de su código (todavía puede usar el atributo alt)