Script survol de la souris

**ConceptInterWEB** · 07/08/2013, 21h37

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 html :

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

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

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
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 php :

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

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>
<!-- fin de #container --></div>

L'utilisation de ce script, se fait dans le fichier coldroit.php

Voici la ligne de code :

Code php :

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

<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 '&nbsp;&nbsp;<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

**NoSmoking** · 07/08/2013, 23h17

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

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

exemple:

Code html :

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
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>

**ConceptInterWEB** · 08/08/2013, 03h24

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

**Bovino** · 08/08/2013, 08h14

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 !

**ConceptInterWEB** · 08/08/2013, 15h15

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

**NoSmoking** · 08/08/2013, 15h32

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

**ConceptInterWEB** · 08/08/2013, 16h18

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 css :

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

Script survol de la souris

JavaScript

Discussions similaires

Partager

Partager