Forum d'entraide PHPFrance

Bonjour,
Le code javascript crée une info bulle à l'endroit ou on lui demande. Mon code consiste à ajouter des images sur un plan via des coordonnées comme lui donne.
Mon but est d'avoir sur chaque image créée une infobulle. Voilà mon souci.

Code : Tout sélectionner

<script language="javascript" type="text/javascript">
<!--
function montre(text) {
  if(i==false) {
  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
  i=true;
  }
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
i=false;
}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
//-->
</script> 


<div id="curseur" class="infobulle"></div>
<p onmouseover="montre('Ici je met tout le texte que je veut, <b>meme de l\'html</b> !');" onmouseout="cache();">coucou</p>


<form method="post" action="recoipointcarte.php">
      <div class="image_envoi">
        <input type="image" name="Achat" src="Achat.png" class="image_envoi"/>
  </div>
</form>
<?
$base=mysql_connect('localhost', 'root', '');

mysql_select_db ('Cartographie',$base);

$requeteimg = "SELECT * FROM ordinateur";
    $resultat = mysql_query($requeteimg, $base); 
    while ($element = mysql_fetch_object($resultat)) {
	 
echo '<img src="ordinateur.jpg" id="'.$element->Nom.'" 
style="position: absolute; left: '.$element->Coordonnex.'px; 
top:'.$element->Coordonney.'px;" width="2%" 

         onmouseover="montre('Ici je met tout le texte que je veux!');" onmouseout="cache();"  >'; 
    }

?>

Code : Tout sélectionner

<p onmouseover="montre('Ici je met tout le texte que je veut, <b>meme de l\'html</b> !');" onmouseout="cache();">coucou</p>


echo '<img src="ordinateur.jpg" id="'.$element->Nom.'" 
style="position: absolute; left: '.$element->Coordonnex.'px; 
top:'.$element->Coordonney.'px;" width="2%" onmouseover="montre('Ici je met tout le texte que je veux!');" onmouseout="cache();"  >';

Pour votre aide merci.

Bonjour,

Qu'est ce qui ne fonctionne pas exactement ? Tu peux définir l'attribut onMouseOver en php, avec le texte que tu veux :

echo '<img src="ordinateur.jpg" id="'.$element->Nom.'" 
style="position: absolute; left: '.$element->Coordonnex.'px; 
top:'.$element->Coordonney.'px;" width="2%" onmouseover="montre(\'Ici je met tout le texte que je veux!\');" onmouseout="cache();"  >';

En clair je veux : L'image qui va être rajouter quand je vais la survoler une info bulle s'affichera avec le nom de cet élément.

Le PHP:(ce que je veux avoir)

echo '<img src="ordinateur.jpg" id="'.$element->Nom.'"  
style="position: absolute; left: '.$element->Coordonnex.'px;  
top:'.$element->Coordonney.'px;" width="2%" onmouseover="montre('.$element->Nom');" onmouseout="cache();"  >';

Je sais pas comment integrer les deux fonctions javascript à l'image, est-ce qu'il faut le mettre en dehors du echo...

 onmouseover="montre('.$element->Nom');" onmouseout="cache();"echo '<img src="ordinateur.jpg" id="'.$element->Nom.'"  
style="position: absolute; left: '.$element->Coordonnex.'px;  
top:'.$element->Coordonney.'px;" width="2%">';

En HTML le code qui permet d'afficher l'info-bulle :

Code : Tout sélectionner

<p onmouseover="montre('Ici le texte à l'intérieur de l'infobulle');" onmouseout="cache();">ICI l'image ou l'objet choisis à survolé</p>

Simplement tu peux faire :

HTML

<p onmouseover="montre('<?php echo  $element->Nom; ?>');" onmouseout="cache();">
<img src="ordinateur.jpg" id="<?php echo $element->Nom;?>" style="..."/>
</p>

Ou encore :

<img src="ordinateur.jpg" onmouseover="montre('<?php echo  $element->Nom ?>');" onmouseout="cache();" id="<?php echo $element->Nom;?>" style="..."/>

Ou enfin, si tu veux tout en php, il faut échapper les ' avec un \' comme ceci:

<?php
echo '<p onmouseover="montre(\''.$element->Nom.'\');" onmouseout="cache();">
<img src="ordinateur.jpg" id="'.$element->Nom.'" style="..."/>
</p>';
?>

Ou la même chose avec le tout dans le bloc img...

Le tout est de ne pas fermer ton expression avec un ' si tu veux afficher un ', il faut utiliser \'

Merci pour ta réponse j'avais effectivement oublier \ . Maintenant le code est correct.

Forum d'entraide PHPFrance

Integrer un fonction javascript au PHP

Integrer un fonction javascript au PHP