Mauvais affichage d'une infobule css

31 mai 2006 à 13:03:52

Bonjours a tous,

J'ai un petit probleme concernant une liste que j'ai faite.
J'aimerais que l'infobule suive le tracé de ma souris, malheureusement ce n'est aps le cas ! (pas faute d'avoir essayé !!)
Sa fait bugger la page, vous allé le voir en direct.
l'adresse est

http://ds.nitroserv.net/liste/index.php
et le pass: divx

Je vous laisse le code source de la page afin que vous puissiez examiner le probleme.
Les variables tels que "$$ITEM_COUNTRY" sont prise en charge apr le programme et exportées directement en php ou html suivant ce que ma liste contient.. Prog super ! (Ant movie catalog)

<?php
if (isset($_POST['pass']))
{
$pass = $_POST['pass'];
}
else
{
$pass = "";
}

if ($pass == "divx")
{
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>$$OWNER_NAME</title>
<style type="text/css">

</style>
</head>

<body>
<p align="center"><b>Derniere MAJ :</b>$$DATE<br/>
Bienvenue Sur ma liste de divx. <br>
Cette liste est perssonelle et si vous n'avez pas été inviter sur ce site par son auteur, <br>
merci de le quitter imédiatement. <br>

Pour le reste, bonne lecture !<a href=""></a></p>

<table align="center" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#CCCCCC"><b>Nº</b></td>
<td bgcolor="#CCCCCC"><center>
<b>Nom Original</b>
</center></td>
<td bgcolor="#CCCCCC"><center>
<b>Nom </b>
</center></td>
<td bgcolor="#CCCCCC"><center>
<b>Année</b>
</center></td>
<td bgcolor="#CCCCCC"><center>
<b>Type</b>
</center></td>
</tr>
$$ITEM_BEGIN
<tr bgcolor="#FFFFFF">
<td>$$ITEM_NUMBER</td>
<td><div id="bulle" style="position: absolute;"></div>
<script>
decal_x = 80;
decal_y = 0;
</script>

<script>
document.onmousemove = suivre_souris1;
var contenu
function pop0(contenu)
{
document.getElementById("bulle").innerHTML = "<table border='1'bordercolor='000000'style='background-color: #ffffff;'cellpadding='10' cellspacing='0'><tr><td><font color='#000000'face='comic sans ms'size='2'>"+contenu+"</font></td></tr></table>";
}
function suivre_souris1(e)
{
if (navigator.appName=="Microsoft Internet Explorer")
{
var x = event.x + document.body.scrollLeft; var y = event.y + document.body.scrollTop;
}
else
{
var x = e.pageX;var y = e.pageY;
}
document.getElementById("bulle").style.left = x + decal_x; document.getElementById("bulle").style.top = y + decal_y;
}
function disparaitre0()
{
document.getElementById("bulle").innerHTML = '';
}</script>

<a href="#"onMouseOver="pop0('<b>$$ITEM_ORIGINALTITLE</b>&nbsp &nbsp Qualité: $$ITEM_TYPE<br><b>Réaliser par $$ITEM_DIRECTOR</b><br>Produit par $$ITEM_PRODUCER<br><b>$$ITEM_COUNTRY</b><br>$$ITEM_CATEGORY <br><b> $$ITEM_YEAR <br>$$ITEM_CATEGORY </b> <br> Durée: $$ITEM_LENGTH minutes <br><b>Acteurs: $$ITEM_ACTORS</b>')" onMouseOut="disparaitre0()">$$ITEM_ORIGINALTITLE</a></td>
<td>$$ITEM_TRANSLATEDTITLE</td>
<td>$$ITEM_YEAR</td>
<td>$$ITEM_TYPE</td>
</tr>
$$ITEM_END
</table>
<br>
<center>

<br>
</center>
</body>
</html>

<?php
}

else
{

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: white;
background-color: black;
}

</style>
</head>

<body>
<div align="center">
<br /><br /><br /><br /><br /><br />

<form action="index.php" method="post">
<fieldset>
<label>
.: Mot de Passe :.<br />

<input type="text" name="pass" /><br />
</label>
<br /> <input type="submit" value="Valider" />
</fieldset>
</form>

<?
}
?>

Je remercie tres fort les perssones qui auront la gentillesse de m'aporter leur aide !

Hawks

31 mai 2006 à 13:58:23

Lut

Le problème viens du fait que ta bulle vient sous la sourie et donc elle retire le hover donc la bulle disparait, donc tu réobtient le hover, donc.....

Voila, mais quelque chose sur le div id="bulle" pour qu'elle reste affiché....

Milouze

31 mai 2006 à 14:18:41

quoi par exemple ? (desoelr mais je suis un vrais GROS noob)

Hawks

31 mai 2006 à 14:24:35

Par exemple dans le CSS
#bulle:hover{
display:block;
}

(lut à moitié ton code, donc grosse probabiliité de pb)

Merwok

31 mai 2006 à 15:45:30

Juste une note : ne jamais se fier à des données externes. htmlentities est ton amie ^^'

<?php
$pass = (isset($_POST['pass'])) ? htmlentities($_POST['pass']) : '';
?>

Ça c'est pour la sécurité (ici c'est pas important, si quelqu'un s'amuse à mettre </html> il n'y a pas de conséquence), le reste du code (le code PHP, le HTML, le CSS à part et le JS) peut être amélioré aussi.

Milouze

31 mai 2006 à 20:20:27

Merci pour vos réponces mais quand je met
ceci :

Par exemple dans le CSS
#bulle:hover{
display:block;
}

dans le style, sa ne marche pas.
J'en suis toujours au meme stade.
Merci pour l'astuce Wok

Merwok

1 juin 2006 à 14:23:29

Je ne peux que te conseiller de te replonger dans certains tutos de Mateo pour bien comprendre ce que fait chaque ligne du code d'Alsa

Milouze

1 juin 2006 à 14:53:01

Merci c'est gentil du conseil mais j'ai vraiment pas le temps de me plonger dans le javascript.
Il sagit d'une mofifivation crrectrice d'une erreur, si qunlqun a la solution
http://ds.nitroserv.net//www/liste/Mde%20%20d/dzjd/ddj%20j%20jdj%20j/%5Ez%20fgnhbsfhb.php

Hawks

1 juin 2006 à 15:00:08

Essai ça

function pop0(contenu)
{
document.getElementById("bulle").innerHTML = "<table border='1'bordercolor='000000'style='background-color: #ffffff;'cellpadding='10' cellspacing='0'><tr><td><font color='#000000'face='comic sans ms'size='2'>"+contenu+"</font></td></tr></table>";
document.getElementById('bulle').style.display = 'block';
}
function disparaitre0()
{
document.getElementById("bulle").style.display = 'none';
}

Et tu ajoute le CSS que je t'avais filé

Merwok

1 juin 2006 à 18:21:11

Mais... qu'est-ce que c'est que ce JavaScript proprio + HTML des années 90 ? :'(

Hawks

1 juin 2006 à 18:25:26

Citation : Wok

Mais... qu'est-ce que c'est que ce JavaScript proprio + HTML des années 90 ?

J'peux avoir une explication?

C'est le innerHTML?

Milouze

1 juin 2006 à 19:55:05

Merci, c'est l'assemblage d'un script Infobulle qui vient de 'Editeurjavascript.com' et du générateur automatique de base de donnée de divx du logiciel 'ant movie catalog'.
J'ai juste ajouter le scriptinfobulle et le pass.
Merci pour ta réponse Hawk, je vais essayer tout de suite !

Merwok

13 juin 2006 à 17:51:31

Je suis critique mais pas méchant hein.
Je connais pas grand'chose en ECMAscript / DOM, mais il me semble que le innerHTML est une technique obsolète.

Pour le HTML, je voulais dire qu'on ne fait pas un tableau pour gérer sa mise en page, et qu'on évite les balise et attributs dépréciés au profit des CSS.