Discussion :

[protos69]

Bonjour,

Voilà, j'ai cherché (mais peut être pas avec les bons mots) comment savoir si mon problème est un bug de IE ( et comment le contourner) ou bien si je fais mal les choses.

J'ai une image avec un border autour, qui est un lien et je veux qu'elle réagisse comme un lien-texte : couleurs qui changent qd on passe dessus, et tout, et tout.

Cela marche bien sous FF 1.0, mais sous IE 6, le cadre reste toujours de la même couleur. Le curseur change bien.

Décidémment, je devrais rester sous FF, mais mon site dois marcher aussi sous IE .

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
a.toto:link { color: #474747;}
a.toto:visited { color: #474747;}
a.toto:hover { color: #00BAFF;}

Lien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="toto" target="_self" href=""><img width="48" height="48" src="images/toto.gif"></a>

[Johnbob]

Bonsoir,

Ce que tu as écrit est plutôt bizarre. FF ne devrait pas changer la couleur de la bordure car pour faire ça il faudrait écrire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a.toto:link { color:#474747; border:solid 1px #474747; }
a.toto:visited { color: #474747; border:solid 1px #474747; }
a.toto:hover { color: #00BAFF; border:solid 1px #00BAFF; }

Le curseur qui change, c'est bizarre aussi. Ce curseur doit toujours être une petite main sur les liens (tous les liens: visisted, hover...)

Donc pour personnaliser le curseur, il faut utiliser:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
a { cursor:default; } [curseur flêche normale]
a { cursor:pointer; } [curseur "petite main"]

[protos69]

En fait, mon image n'a pas de bordure, dans le sens si je retire les balises <a></a> l'entourant le cadre disparait.

Je présume que les navigateurs mettent automatiquement ce cadre autour de l'image lorsqu'elle sert de lien.

Quand au curseur, il change dès que je suis sur l'image, par défaut pour un lien. Je n'ai jamais eu à redéfinir son comportement.

Voici mon site (en cours de construction), pour voir le comportement de l'image : dans le menu 'Produits' cliquer sur 'Catalogue'

http://www.steax.com

[protos69]

Problème résolu. Ouf !

Voulant garder un cadre qui change de couleur autour de mon image, je l'ai mise dans une cellule <td> et j'ai joué avec le MouseOn, Out pour changer la couleur du cadre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<td width='52' height='52' border='0' align='center' bgcolor='#C1C1C1' onMouseOver="this.style.backgroundColor='#474747';" onMouseOut="this.style.backgroundColor='#C1C1C1';">
<a href='' target=''><img width="48" height="48" src="images/".$cat[$i]['icone'].".gif" border="0"></a>
</td>

Voilou

[Johnbob]

Je pense que le premier code que je t'ai donné fonctionne ! Il fallait juste augmenter la largeur de la bordure que j'avais mise à 1px. D'autre part, IE reconnait la peuso-classe ":hover" sur les balises "a" donc ça devrait marcher et c'est bien pratique !

PS: Sympa le design du site !

[protos69]

J'ai réessayé ton code, mais ce que j'obtiens est bizarre. (voir le site).
J'ai mis nos solutions une sur deux.

Mon code est lourd je sais, mais pour le moment cela marche.
Et je n'ai pas le temps là pour chercher le souci (je dois avancer)

Mais étant frustré par rapport aux CSS, je continue à chercher dans la voie que tu m'a indiqué. Ah, les devoirs à la maison...

Merci pour ton commentaire, je suis pas tout seul sur le coup, j'en ferai par à mon collègue.

Tchox