Images sur liens

Salut à tous,

Je voulais savoir s'il était possible de changer d'image suivant le catégorie de la balise a.

Je m'explique, par exemple sur mon site j'ai une image "GO" qui donne sur un lien, seulement c'est seulement grace à ce code :

<a href="http://...."><img src="img.gif" border=no /></a>

Mais est-il possible de mettre l'image via le CSS, par exemple avec background, de sorte à ce que par exemple lorsqu'on clique dessus le "GO" change, donc quelque chose qui ressemblerai à :

a:visited
{
      background-image: url("autre_image".gif");
}

Désolé, pour le CSS :

a:visited 
{ 
      background-image: url("autre_image.gif"); 
} 

Salut,

Vu qu'il s'agit d'un lien, tu ne peux pas te permettre d'utiliser un lien vide qui ferait appel à un background en CSS. Ce n'est pas une bonne idée car cela serait inaccessible si l'image n'est pas affichée.
Si un lien contient une information (et un lien contient toujours une information), l'image doit bel et bien se trouver dans le code html, avec en plus l'attribut alt qui reprend le contenu textuel du lien pour se substituer à l'image non affichée.

donc impossible de changer l'image pour seulement a:visited ?

Avec ton image dans le code html, il te sera quand même possible de changer ton image mais il te faudra alors recourir à javascript et non plus CSS pour y parvenir.

merci mais ça ne m'aide pas vraiment ^^

Bonsoir,

Il y a une possibilité qui peut selon le design s'adapter à ce cas. Principe : une vraie image en "dur" dans la page HTML et cette image est dotée de parties transparentes (un gif par ex.) ou translucides (un png par ex.).
Sur cette image les parties non-opaques sont représentées par du blanc et on utilisera le background de l'image pour faire les effets hover, active, visited…

<a href="#" class="go"><img src="images/go.gif" alt=""></a>

a.go img         { background: white }
a.go:hover img   { background: yellow }
a.go:active img  { background: red }
a.go:visited img { background: blue }

On peut placer une image d'arrière-plan par dessus la couleur, un dégradé par ex.
J'utilise souvent ce principe pour les input type="image" des formulaire.

C'est bien de donner du code :

a.go img         { background: white } 
a.go:hover img   { background: yellow } 
a.go:active img  { background: red } 
a.go:visited img { background: blue }

Mais c'est encore mieux quand c'est bien fait:

a.go img         { background: white } 
a.go:visited img { background: blue }
a.go:hover img   { background: yellow } 
a.go:active img  { background: red } 

coeos a écrit :

Mais c'est encore mieux quand c'est bien fait:

Et c'est encore mieux quand on explique pourquoi on vient de remballer le membre précédent...
http://forum.alsacreations.com/topic-1-29444-1-Alink-ahover-aactive-avisited-RESOLU.html

Merci, je vais surement utiliser ta méthode Aureance. L'ordre a quoi de problématique ? certain navigateur respecte l'ordre ? Car j'ai toujours mis dans n'importe quel ordre et jamais de problème sous ie ou ff.

KelT a écrit :
L'ordre a quoi de problématique ? certain navigateur respecte l'ordre ? Car j'ai toujours mis dans n'importe quel ordre et jamais de problème sous ie ou ff.

Justement, le lien que je donne témoigne d'un problème dû à un mauvais ordre de déclaration.

Ben le lien que donne explique pas du tout d'où venait le problème, de plus l'internaute qui a ce problème met bien, je cite

a écrit :
Message qui peut être supprimé : j'ai dû faire une erreur de codage ; j'ai tout effacé et tout recodé ET ÇA MARCHE au poil...

Raphael a écrit :

Et c'est encore mieux quand on explique pourquoi on vient de remballer le membre précédent...
http://forum.alsacreations.com/topic-1-29444-1-Alink-ahover-aactive-avisited-RESOLU.html

Et c'est encore mieux avec la documentation officielle ?

http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html#dynamic-pseudo-classes


et en français:
http://www.yoyodesign.org/doc/w3c/css2/selector.html#dynamic-pseudo-classes
Bon allez, on arrête là la surenchère
Modifié par coeos (26 Mar 2010 - 10:38)

@KelT : Je viens de te mettre un petit exemple en ligne et j'y ai ajouté a:visited:hover - Ça le fait bien. (surtout dans l'ordre indiqué par le vilain monsieur)

c'est cool merci

Le code n'a pas l'air de fonctionner sous ie, enfin j'ai IEs4 sous ubuntu et les background ne fonctionnent pas, j'ai du blanc à la place.

J'ai un autre problème, une espèce de barre apparait sur le côté de l'image sous firefox, pourtant ça ne vient pas de l'image, d'ailleurs lorsqu'on dé/zoom avec Crtl + roulette, cette petite barre sur le côté disparait puis réapparait suivant la taille du zoom, ça m'est déjà arrivé sur un dessin j'ai jamais compris, voila le screen :

http://www.kelt-informatique.fr/Sans titre.jpg

Merci

Salut,

Plutôt qu'un screen, met nous un lien vers un test parce qu'on ne voit vraiment pas ce qui fait appraître cette barre sur le coté.
Si l'image était en arrière-plan j'aurais pu comprendre… Si ça se modifie au zoom, c'est peut-être une aberration d'affichage : Un truc qui se produit parfois avec certains écrans quand on tombe sur un nombre de pixels qui ne résulte pas d'une opération (+-/*) faite avec cette suite de chiffres : 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048… etc… Quand elle se présente, cette aberration d'affichage se fait plutôt horizontalement et prend la totalité de la largeur du navigateur sur 1px.
Mais je m'avance un peu trop sans doute, le mieux est vraiment de voir un bout de code et un test en ligne pour parler sérieusement.

Pour ce navigateur qui affiche un fond blanc essaie avec background-color : qui est plus précis, au lieu de background : qui, en fait, est une notation raccourcie.

Question : c'est quoi IEs4 ? pas Explorer 4, j'espère
Modifié par Aureance (27 Mar 2010 - 15:50)

KelT a écrit :
enfin j'ai IEs4 sous ubuntu

Pas le meilleur outil pour tester. Dans l'idéal il te faut un Internet Explorer natif sous Windows. Donc un Windows en dual boot, ou virtualisé, ou sur un autre poste.
Et pour chaque version d'Internet Explorer testée, il vaut mieux avoir une version native. Donc autant d'OS Windows virtualisés, par exemple.

IEs4 c'est internet explorer 5-6 compatible sous linux.

Pour la clarté de mon code je ne mets jamais de raccourci donc j'ai déjà background-color

Si je fais un test avec un code pour la barre sur le côté, vous ne la verrez pas car apparemment ça ne le fait que chez moi, même sous ie il n'y a pas de pb.

Euh Florient quand je créer mon site, je ne vais pas changer d'os pour vérifier à chaque manip Surtout que le dualboot ne m'ai plus utile maintenant.

IEs4 a été crée principalement pour tester les codes justement, sinon quel est l'intérêt d'un ie sous linux... donc ça reste le meilleur outil pour tester l'affichage sous les différentes versions de ie.