En utilisant sprites avec la balise IMG?

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

Question

Je comprends comment utiliser sprites, cependant, n'est pas un attribut « src » requis pour les balises IMG? Je pouvais toujours utiliser un SPAN ou autre balise et définir l'arrière-plan / largeur / etc, mais il ne sera pas sémantiquement correcte.

En fait, je voudrais d'omettre la SRC pour une balise IMG et utiliser seulement sprites, mais je suis préoccupé par le code HTML ne pas être techniquement valable à cause de cela. Merci.

Était-ce utile?

La solution

A propos de la correction sémantique:

Lorsqu'une image a un sens sémantiquement, il est donc considéré comme contenu, utiliser une balise IMG , sans sprites, et un correctement configuré ALT.

Quand une image est juste décoration, comme l'arrière-plan d'une boîte, arrière-plan d'un bouton, arrière-plan d'une option de menu, etc., il n'a pas de sens sémantiquement, de sorte que vous pouvez simplement utiliser comme arrière-plan d'un SPAN, DIV, etc. de CSS. Vous pouvez utiliser des sprites dans ce cas.

Autres conseils

Utilisation sprites ne signifie pas nécessairement que vous devez les définir dans les milieux css. Vous pouvez également utiliser sprites balise IMG, à faire, vous avez besoin essentiellement rogner votre image. Il y a deux bons articles expliquant cette technique:

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

http://www.artzstudio.com/2010/04/img-sprites- à contraste élevé /

Les deux méthodes CSS et IMG ont que leurs propres avantages, de sorte que vous devez savoir lequel vous convient le mieux.

I utiliser un 1x1 gif transparent (dite entretoise) pour le src. puis définir l'image d'arrière-plan pour que balise img avec la position de bg correspondant. De cette façon vous êtes en utilisant la vitesse de sprites et de maintenir la sémantique de votre code (vous pouvez toujours utiliser l'attribut alt)

  

Je pourrais toujours utiliser un SPAN ou autre balise et définir l'arrière-plan / largeur / etc, mais il ne sera pas sémantiquement correcte

En fait, il n'y a rien de mal sur l'utilisation de CSS pour définir l'arrière-plan d'une travée ou div. Il serait en fait syntaxiquement incorrect d'omettre le src d'une image, comme tel est le point de l'ensemble de la balise. Il n'y a rien dans les normes disant que vous devez mettre le texte à l'intérieur d'une portée. Syntaxiquement parlant, modifier l'arrière-plan sur un élément serait la façon la plus « correcte » de le faire.

Voici l'arbitre sur les balises img sur du W3C: http : //www.w3.org/TR/html401/struct/objects.html#h-13.2

Et un peu de lecture supplémentaire: http: // www.w3.org/TR/html4/struct/global.html#h-7.5.3

  

Ces éléments définissent le contenu à être en ligne (SPAN) ou au niveau du bloc (DIV), mais pas imposer d'autres langages de présentation sur le contenu. Ainsi, les auteurs peuvent utiliser ces éléments en conjonction avec des feuilles de style, l'attribut lang, etc., pour adapter HTML à leurs propres besoins et goûts.

Vous pouvez utiliser les milieux CSS, ou HTML Canvas éléments pour dessiner dynamiquement sur. Avec la toile est que vous avez la possibilité d'images facilement sous-ensemble et effectuer effets du mode de mélange .

Vous résoudre ce en repensant vos options.

Vous créez une zone définie avec un <a> avec display:block; ou <div> et l'utilisation overflow hidden; à débordement cache position:relative;.

Ensuite, vous placez l'image-objet image à l'intérieur <img> position absolue, ce qui est possible puisque vous positionné le parent.

Utilisez ensuite :hover sur l'image pour changer de position.

Maintenant l'image-objet est basé sur une balise img, de sorte que vous pouvez utiliser votre texte alt.

L'exemple suivant est basé sur un sprite Facebook avec deux versions de l'icône sur le dessus de l'autre, chaque 50px par 50px, hauteur totale de l'image étant 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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top