¿Usando sprites con etiqueta IMG?
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 debido a ello. Gracias.
6 answers
Acerca de la corrección semántica:
Cuando una imagen tiene un significado semántico, por lo que se considera que es contenido, use una etiqueta IMG, sin sprites, y una ALT correctamente configurada.
Cuando una imagen es solo decoración, como el fondo de una caja, el fondo de un botón, el fondo de una opción de menú, etc., no tiene significado semántico, por lo que puede simplemente usarlo como fondo de un SPAN, DIV, etc. de CSS. Puedes usar sprites en este caso.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-25 08:54:43
Usar sprites no significa necesariamente que necesite definirlos en fondos css. También puedes usar sprites de etiquetas IMG, para ello necesitas básicamente recortar tu 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 /
Ambos métodos CSS e IMG tienen sus propios beneficios, por lo que debe averigua cuál te queda mejor.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-29 13:06:00
Utilizo un gif transparente 1x1 (llamado espaciador) para el src. luego establezca la imagen de fondo para esa etiqueta img con la posición bg correspondiente. de esta manera estás utilizando la velocidad de sprites y manteniendo la semántica de tu código (todavía puedes usar el atributo alt)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-31 17:07:05
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 malo en usar CSS para establecer el fondo de un span o div. En realidad sería incorrecto sintácticamente omitir el src de una imagen, ya que ese es todo el punto de la etiqueta. No hay nada en los estándares que diga que tienes que poner texto dentro de un espacio. Sintácticamente hablando, modificar el fondo en un elemento sería el la forma más "correcta" de hacerlo.
Aquí está la referencia sobre las etiquetas img en W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2
Y una pequeña lectura extra: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
Estos elementos definen el contenido como inline (SPAN) o block-level (DIV) pero no imponen otros modismos de presentación en el contenido. Por lo tanto, los autores pueden usar estos elementos junto con hojas de estilo, el atributo lang, etc., para adaptar HTML a sus propias necesidades y gustos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-02 14:33:25
Puede usar fondos CSS o elementos HTML Canvas para dibujar dinámicamente. Con canvas tiene la capacidad de subconjuntos de imágenes fácilmente y realizar efectos de modo de fusión.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-02 14:36:01
Usted resuelve esto repensando sus opciones.
Se crea un área definida con un <a> con display:block; o <div> y se usa overflow hidden; para ocultar el desbordamiento y position:relative;.
Luego coloca su <img> sprite de imagen dentro de absolutamente posicionado, lo cual es posible desde que posicionó el padre.
Luego use :hover en la imagen para cambiar de posición.
Ahora tu sprite está basado en una etiqueta img, así que puedes usar tu alt texto.
El siguiente ejemplo se basa en un Facebook sprite con dos versiones del icono uno encima del otro, cada 50px por 50px, la altura total de la imagen es de 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-11 23:38:01