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

Script survol de la souris

JavaScript

Vue hybride

Discussions similaires

Partager

Partager