Discussion :

[Devilju69]

Bonjour, je sais qu'il y a plusieurs discussions dessus mais je ne trouve pas ma solution.

Voila j'ai des liens images qui ont un contour bleu sous IE mais pas sous Firefox.
J'ai essayé de mettre border:0 ; cela fonctionne mais je perd le a:hover.

Quel moyen je pourrais utiliser ?

[Kerod]

Pour t'aider il faudrait déjà avoir un minimum de code

[Devilju69]

Voila un peu de code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:link {
color: #FFFFFF;
text-decoration:none;
}
 
a:visited {
color: #FFFFFF;
text-decoration:none;
}
 
a:hover {
color:#FF0000;
text-decoration:underline;
}

[kohsaka]

un peu de html aussi serait pas mal

[Devilju69]

Code :

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

1
2
      <a href="produit_choix.php?choix=1"><img src="Images/img_site/par_gamme.gif" alt="par_gamme" style="margin-right:40px"></a>
      <a href="produit_choix.php?choix=2"><img src="Images/img_site/par_famille.gif" alt="par_famille"></a>

[kohsaka]

sais tu qu'il n'est pas nécessaire d'avoir une balise image pour un lien ?

ex :

Code :

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

1
2
 
<a id="gamme" href="#" title="blabla"></a>

Code :

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

1
2
3
4
5
6
7
 
#gamme {
    display: block;
    height: 50px;
    width: 150px;
    background: transparent url(src_img) no-repeat;
}

sinon avec ce code tu n'as pas de bordure normalement

Code :

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

1
2
 
<a href="#" title="_"><img src="src_img" alt="_" border="0" /></a>

Pour bien apprendre facilement CSS regarde ces excellents tutoriels et cours de formation CSS : http://css.developpez.com/cours/

[Devilju69]

sinon avec ce code tu n'as pas de bordure normalement
Code :


<a href="#" title="_"><img src="src_img" alt="_" border="0" /></a>

Sa fonctionne pas, j'ai pas le hover ;

Et l'autre solution non plus

[kohsaka]

Code :

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

#gamme:hover

je vois pas quel est le problème :/

quel browser utilises tu ? j'ai testé sur ie6, ie7 et FF

[Devilju69]

Cela marche nikel sous FF mais pas sous IE 6 et 7

[HiRoN]

Et en rajoutant juste :

Code CSS :

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

1
2
 
img { border:none; }

?

(A appliquer plus précisément au bon élément si cela fonctionne)

[Devilju69]

Si je met border:0 ou border: none sa menleve le hover

[Candygirl]

Quel effet souhaites-tu obtenir exactement lors du roll-over sur tes liens normaux et sur tes liens image?

[Devilju69]

Juste que le lien deviens rouge et que les cadres des images deviennent rouge

[kohsaka]

ex :

Code :

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

1
2
 
<a id="gamme" href="#" title="blabla"></a>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
#gamme {
    display: block;
    height: 50px;
    width: 150px;
    background: transparent url(src_img) no-repeat;
}
 
#gamme:hover {
    display: block;
    height: 50px;
    width: 150px;
    background: transparent url(src_img) no-repeat;
    border: 1px solid #FF0000;
}

[Candygirl]

Quelque chose du genre?

Code html :

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

<a href="produit_choix.php?choix=2"><img src="Images/img_site/par_famille.gif" alt="par famille"></a>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a {
  color: #FFFFFF;
  text-decoration:none;
}
 
a:hover {
  color:#FF0000;
  text-decoration:underline;
}
 
a img {
  border:1px solid blue;
}
 
a:hover img {
  border-color:red;
}

@kohsaka
Avoir un lien vide est déconseillé pour des raisons d'accessibilité.

[kohsaka]

quel problème d'accessibilité cela pose t-il ?

[Candygirl]

Le lien est inaccessible par un navigateur textuel, si l'image ne s'affiche pas pour x raison (option du navigateur de ne pas afficher les images, problème au téléchargement,...) , pour les personnes qui se serviraient d'une aide quelconque genre rendu vocal de la page,... ou encore le libellé du lien peut être une perte d'information pour les moteurs de recherche.

Une image qui véhicule une information pertinente devrait être mise dans le html avec un attribut alt correctement renseigné.

[kohsaka]

je note. :)

[Devilju69]

Merci beaucoup candygirl