Script survol de la souris

Version imprimable

Bonjour à tous,

J'ai un script qui fonctionne bien, sauf que je n'ai pas le même résultat la seconde fois.

Au survol d'un surnom, la photo de l'usager apparait avec son prénom.
Pour des fins de test , j'ai mis un fond noir, avec le prénom de la personne centrer, mais lorsque je change de surnom, la photo apparait, le fond noir n'est plus, et le prénom n'est plus centré.

Voici le code, je ne sais pas si vous pouvez m'aider.

Code:

<div style="position: absolute; visibility: hidden; text-align:center; background-color:#000000" id="topdecklink" align="center"/></div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 domok = document.getElementById; if (domok) { skn = document.getElementById("topdecklink").style; if(navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; } function poplink(msg,texte) { var content ="<div align='center' width='94' style='background-color:#000000'><img src="+msg+" height='120' width='90'><br><font style='font-size:12pt;color:#F00'>"+texte+"</font></div>"; if (domok) { document.getElementById("topdecklink").innerHTML = content; skn.visibility = "visible"; } } function get_mouse(e) { var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; skn.left = x - 100; skn.top = y - 100; } function killlink() { if (domok) { skn.visibility = "hidden"; document.getElementById("topdecklink").innerHTML = ''; skn.width = "0px"; } }
La page est montée avec des DIVs, et des fichiers y sont inclus, voici la structure CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="contour"> <div id="entete"><div id="menu"><?php include('../menu.php'); ?></div></div> <div id="coldroit"> <?php if ($_SESSION['auth_users'] != 'yes') { include('../login.php'); } ?> <?php include('../coldroit.php'); ?> </div> <div id="contenu"> Page principale </div> <br class="clearfloat" /> <div id="pieddepage"><?php include('../footer.php'); ?></div> </div>
L'utilisation de ce script, se fait dans le fichier coldroit.php

Voici la ligne de code :

Code:

<a href="http://www.labougeotte.net/membres/membreprofil.php?ID=<?php echo $_SESSION['id_users']; ?>&id_profil=<?php echo $row['ID']; ?>" onMouseOver="poplink('http://www.labougeotte.net/images/<?php echo $photo; ?>','<?php echo stripslashes($row['prenom']); ?>')" onMouseOut="killlink()"><?php echo stripslashes($row['nickname']) ?> - <?php echo stripslashes($row['sexe']); ?><?php if ($row['online'] == '1') { echo '  <img src="http://www.labougeotte.net/img/bulle_tchat.png" width="15" height="15" border="0" />'; } ?></a>

Si vous avez des questions, je suis là pour y répondre.
Merci de votre aide précieuse.

Sylvain

Bonjour,
tu aurais pu déterrer un script moins antédiluvien :mouarf:

De nos jours tu peux réaliser cela en pur CSS sans risque de collusion

exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>HOVER</title>
<style>
.auteur{
  position:relative;
}
.auteur span{
  position:absolute;
  left:0;
  top:1em;
  display:none;
  border:1px solid #888;
}
.auteur:hover span{
  display:inline;
}
</style>
</head>
<body>
<div class="auteur">NoSmoking<span><img src="http://www.developpez.net/forums/image.php?u=405341&dateline=1362845012"></span></div>
</body>
</html>

08/08/2013, 03h24
ConceptInterWEB

Bonjour à toi,

Merci pour le tuyau en CSS ca convient amplement à mes besoins.

C'est simple et efficace. Merci pour ta réponse rapide également.

Sylvain
08/08/2013, 08h14
Bovino

Citation:

J'ai un script qui fonctionne bien, sauf que je n'ai pas le même résultat la seconde fois.

Ouais... donc il fonctionne pas très bien en fait ! :mrgreen:
08/08/2013, 15h15
ConceptInterWEB

Bonjour,

J'ai un petit souci avec les modifications apportés, j'ai 3 PCs chez moi et tout fonctionne sous FireFox, mais rien ne fonctionne sous IE.

J'ai un PC avec IE8, l'autre avec IE9 et l'autre avec IE10 est-ce que l'on doit faire des modifications pour que ca fonctionne sous IE , il y a surement une facon de faire en sorte que le tout soit correct.

Je sais que IE est un exception en soit.

Merci de votre aide
Sylvain
08/08/2013, 15h32
NoSmoking

:koi: le code exemple que je t’ai fournis fonctionne sur IE7-8 alors...

Montre nous ton code, si c'est exclusivement du CSS alors le forum approprié c'est Forum CSS

Hello,

Le code que j'utilise est celui que tu m'as créer. Je n'ai rien changé, mis à part que j'ai mis des couleurs de FOND etc...

Mais comme tu mentionnes, je peux aller dans le Forum CSS et poser la question.

Code:

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:

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