[IMG] background image

Version imprimable

Bonjour à tous,

pour diminuer le nombre de requêtes HTTP, les intégrateurs utilisent un "Sprite" (plusieurs images dans une seule image).

ici je dois mettre des images avec un lien.

Le soucis est que les images ne s'affichent pas en Xhtml sous Firefox.

Est-ce qu'il y a quelques chose d'équivalent ?

Voici mon code
Code:

1 2 3 4 5 6 7 8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <a href="http://www.mon-site.com"><img style="background-position: -12px -5px; border: 0px; text-decoration: none; background-image:url(images/flag_all.png); width: 18px; height: 12px;" /></a> </body> </html>

01/09/2009, 21h19
marco_fot_hxc

Bonsoir,

Sous les autres navigateurs c'est ok ?
Parceque je suis un peu étonné de voir une balise <img /> sans attribut src :)
Pour faire ce que tu veux faire, je pense qu'il vaut mieux mettre une div avec l'image en background.
02/09/2009, 08h37
Damouille

Citation:

pour diminuer le nombre de requêtes HTTP, les intégrateurs utilisent un "Sprite" (plusieurs images dans une seule image).

Si on utilise plusieurs images a la place d'une seule. Est-ce qu'on va pas plutot augmenter le nombre de requetes?
02/09/2009, 11h00
Macmillenium

Citation:

Envoyé par gianni7033

pour diminuer le nombre de requêtes HTTP, les intégrateurs utilisent un "Sprite" (plusieurs images dans une seule image).

Oui mais attention aussi au poids de l'image :)

Citation:

Envoyé par gianni7033

Le soucis est que les images ne s'affichent pas en Xhtml sous Firefox.

Vérifie la position du background, l'image n'est peut être pas servie avec le bon type MIME aussi (renommer l'extension par exemple).
Cependant, es-tu sûr de faire le bon choix ? les images sont porteuses d'informations ou juste décoratives ?
Si c'est le 2éme cas, je ne pense pas que l'utilisation de l'élément IMG soit une grave erreur sémantique.
02/09/2009, 20h25
gianni7033

Citation:

Envoyé par marco_fot_hxc

Bonsoir,

Sous les autres navigateurs c'est ok ?
Parceque je suis un peu étonné de voir une balise <img /> sans attribut src :)
Pour faire ce que tu veux faire, je pense qu'il vaut mieux mettre une div avec l'image en background.

oui sous I.E. ça fonctionne

mais avec un div ça fonctionne pas du tout car ça doit être mis ENTRE la balise <a>, c'est pour faire un lien.

Je mets un div uniquement quand c'est une image de fond

Citation:

Envoyé par Damouille

Si on utilise plusieurs images a la place d'une seule. Est-ce qu'on va pas plutot augmenter le nombre de requetes?

Je pense que tu ne connais pas les Sprites.

C'est plusieurs images dans une seule image.

Citation:

Envoyé par Macmillenium

Oui mais attention aussi au poids de l'image :)

Aucun soucis pour la taille de l'image dans ce cas précis.

Citation:

Envoyé par Macmillenium

Vérifie la position du background, l'image n'est peut être pas servie avec le bon type MIME aussi (renommer l'extension par exemple).
Cependant, es-tu sûr de faire le bon choix ? les images sont porteuses d'informations ou juste décoratives ?
Si c'est le 2éme cas, je ne pense pas que l'utilisation de l'élément IMG soit une grave erreur sémantique.

Aucun problème avec la position du background, ça s'affiche pas du tout sous firefox en Xhtml.

Ici dans mon cas précis, c'est pour mettre des liens sur des drapeau (en fonction de la langue) mais sur d'autre sites ça va aussi être utile dans d'autre cas.
03/09/2009, 08h28
Damouille

Citation:

Je pense que tu ne connais pas les Sprites.

Oui, j'ai confondu avec des stripes (strillures en francais), ou on utilise une petite image en repeat pour obtenir un motif.

Je veux bien qu'on m'explique car plusieurs images dans une image, cela ne me parle pas.
03/09/2009, 10h03
HiRoN

Bonjour,

Citation:

Envoyé par Damouille

Je veux bien qu'on m'explique car plusieurs images dans une image, cela ne me parle pas.

Un complément d'infos ici ;)
03/09/2009, 11h13
pop_up

Est ce que tu as une version en ligne qu'on puisse consulter ?

A tu l'extension firebug ? Si oui, est ce que le chemin de l'image est bien correct quand tu inspectes le code et est ce que en mettant la souris sur le chemin de l'image, il te l'affiche bien ?

Heu Firebug non je l'ai pas ...
Mais le chemin de l'image est correcte.

Je viens vite de vous faire un code source, vous pouvez l'enregistrer dans un fichier .html
Vous verrez que sous I.E. on voit une partie du logo de google et non sous Firefox.
Une fois qu'on retire la première ligne de code (le doctype du Xhtml) ça s'affiche sous Firefox, mais j'aimerais bien que l'image s'affiche en Xhtml.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> avant l'image <a href="http://www.google.fr"> <img style="background-position: -12px -5px; border: 0px; text-decoration: none; background-image:url(http://www.google.fr/intl/fr_fr/images/logo.gif); width: 64px; height: 32px;" /> </a> après l'image </body> </html>

07/09/2009, 07h09
Damouille

Si, la reponse t'a ete donnee par marco_fot_hxc. Le deuxieme post.

Citation:

Parceque je suis un peu étonné de voir une balise <img /> sans attribut src
Pour faire ce que tu veux faire, je pense qu'il vaut mieux mettre une div avec l'image en background.

Ne pas pas mettre de src sur une balise img et d'y mettre un bg-image n'est pas correct. Pour faire ce que tu veux il te faut un element de type block, un div par exemple. Ou un element inlne en display block comme dans mon exemple ci-dessous.

Code:

<a href="http://www.google.fr" style="background-position: -12px -5px; border: 0px; text-decoration: none; background-image:url(http://www.google.fr/intl/fr_fr/images/logo.gif); width: 64px; height: 32px; display: block;"></a>

Edit: En html il y a 2 grandes familles, les elements block et les element inline. Les elements "inline" (span, a, img...) s'ajustent a la taille de leur contenu. Ils ne prennent pas en compte la width n'y la height.
Dans ton cas, si on ne voit pas l'image en background, c'est par ce que tu utilises un element inline sans contenu. Cet element fait donc 0px de haut par 0px de large. Tu peux eventuelement utiliser du padding pour y remedier mais on preferera en general dans ce genre de cas un display block avec les width et height exacte de l'image (on peut utiliser le float pour un alignement horizontal).
07/09/2009, 11h49
FoxLeRenard
Citation:

Envoyé par Damouille

Edit: En html il y a 2 grandes familles, les elements block et les element inline. Les elements "inline" (span, a, img...) s'ajustent a la taille de leur contenu. Ils ne prennent pas en compte la width n'y la height.

Bonjour,
Houla je rêve ou tu a écris un peut vite
alors on ne peut pas écrire cela :roll: 8O
Code:

1 2 3 <img src="xx.jpg" width=150px height=200px alt="" />
07/09/2009, 11h58
Damouille

Citation:

Houla je rêve ou tu a écris un peut vite alors on ne peut pas écrire cela

En effet ;) , j'oubliais de preciser que je parlais de css. Les attributs height et width c'est autre chose. Mais tu ne pourras pas faire de Sprite avec cette methode.
07/09/2009, 12h10
Macmillenium
Citation:

Envoyé par Damouille

Edit: En html il y a 2 grandes familles, les elements block et les element inline. Les elements "inline" (span, a, img...) [...]. Ils ne prennent pas en compte la width n'y la height.

Oui pour SPAN et A (élément inline non-remplacé) et non pour IMG (élément inline remplacé).

Citation:

Envoyé par Damouille

En effet ;) , j'oubliais de preciser que je parlais de css. Les attributs height et width c'est autre chose.

C'est pareil.
Citation:
Envoyé par FoxLeRenard

Code:

1 2 3 <img src="xx.jpg" width=150px height=200px alt="" />
Code:

1 2 <img src="xx.jpg" width="150" height="200" alt="" />
Pas d'unité en px pour les valeurs d'attributs width et height.

Enfin, gianni7033, vérifie que ton image est servie avec le bon type MIME.
07/09/2009, 13h31
FoxLeRenard

Citation:

Envoyé par Macmillenium

Pas d'unité en px pour les valeurs d'attributs width et height.

C 'est ta norme perso :D
et les % on a le droit :?
07/09/2009, 13h49
Macmillenium

Citation:

Envoyé par FoxLeRenard

C 'est ta norme perso :D

Tu peux continuer à le mettre si tu veux, ici on recommande les bonnes pratiques.

Citation:

Envoyé par FoxLeRenard

et les % on a le droit :?

Oui.
07/09/2009, 19h50
gianni7033
ha enfin ben nikel maintenant

c'était juste le display: block qu'il manquait :ccool:

un grand merci

juste un dernier détail

sous I.E. il met le contour de l'image en blanc

j'ai essayé de mettre
Code:

1 2 text-decoration: none; border: 0px;
sur la balise A et l'IMG mais ça ne change pas...