Discussion :

[ConceptInterWEB]

Bonjour,

J'ai un petit CODE CSS qui permet de faire afficher une image lorsque on survol un lien.

Ce script fonctionne super bien sous FireFox, j'ai aussi Safari sur mon PC et tout se passe bien, mais rien ne se passe sous IE.

J'ai chez moi 3 PC avec 3 versions différentes de IE soit la 8,9,10 et même résultat sur les 3. Lorsque je passe ma souris sur le lien, l'image n'apparait pas.

Je sais que probablement je vais avoir besoin d'exception pour Internet Explorer, mais mes connaissances en CSS ne sont pas assez bonnes pour comprendre ce qui ne va pas.

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
18
19
20
.auteur{
  position:relative;
}
 
.auteur span{
  position:absolute;
  left:-90px;
  top:-90px;
  display:none;
  border:1px solid #888;
  text-align:center;
  color:#FF0000;
  background-color:#000000;
  font-size:10px;
}
 
.auteur:hover span{
  display:inline;
  z-index:9000000;
}

J'ai ajouté un z-index car l'image apparaissait en dessous du lien et non par dessus.

Le lien avec le code :

Code php :

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

1
2
3
4
5
6
7
8
9
<div class="auteur">
<a href="http://www.labougeotte.net/membres/membreprofil.php?ID=<?php echo $_SESSION['id_users']; ?>&id_profil=<?php echo $row['ID']; ?>">
<?php echo stripslashes($row['nickname']) ?> - <?php echo stripslashes($row['sexe']); ?>
<span>
<img src="http://www.labougeotte.net/images/<?php echo $photo; ?>" width="90" height="120" /><br /><?php echo stripslashes($row['prenom']); ?>
</span>
<?php if ($row['online'] == '1') { echo '&nbsp;&nbsp;<img src="http://www.labougeotte.net/img/bulle_tchat.png" width="15" height="15" border="0" />'; } ?>
</a>
</div>

Merci
Sylvain

[rodolphebrd]

Bonjour,

merci de fournir le code HTML généré par votre navigateur et non le code PHP.

[ConceptInterWEB]

Bonjour

Voici le code HTML pour FireFox

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="auteur">
<a href="http://www.labougeotte.net/membres/membreprofil.php?ID=1&id_profil=299">
coolmarie - Femme
<span>
<img src="http://www.labougeotte.net/images/299.jpg" width="90" height="120" />
<br />Marie-Claude
</span>
</a>
</div>

Et celui de Internet Explorer, j'ai pris un autre usager au hasard

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="auteur">
<a href="http://www.labougeotte.net/membres/membreprofil.php?ID=1&id_profil=473">
Cavalia - Femme
<span>
<img src="http://www.labougeotte.net/images/473.jpg" width="90" height="120" />
<br />Isabelle
</span>
</a>
</div>

Voilà si vous en voulez plus, je peux fournir plus, mais la page source est assez grosse en poids.

Merci
Sylvain

[NoSmoking]

Re,
tu ne respectes pas la structure que je t'ai donné ICI, à savoir

Code html :

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

1
2
3
4
<div>
  <a>...</a>
  <span>...</span>
</div>

de plus le positionnement left:-90px; top:-90px; te sert à quoi?

[ConceptInterWEB]

Hello,

Même en changeant la struture que tu m'as proposé, cela ne change rien au résultat avec IE.

Le positionnement sert à placer la photo non pas à coté du curseur, mais un peu plus à gauche et un peu plus haute tout simplement.

Voici une petite capture pour te montrer ce que ca donne


Merci
Sylvain

[Candygirl]

Salut,

Tu as bien un doctype correctement renseigné, tout en haut de ta page, et sans BOM si encodée en UTF-8 ?