Lire bdd à partir d'un mouseover ???

[bad wolf]

 

voila le truc,

 

j'ai une carte, sur laquelle s'affichent des données lorsqu'on passe le curseur sur certains points de cette carte

 

en gros, comme sur cette page :

A More Accessible Map

 

est-il possible d'afficher, dans les cadres qui apparaissent, des données issues d'une base mysql??

 

Il faut que l'appel à la base se fasse seulement lorsqu'on pointe avec le curseur (sinon c'est simple, je sais faire )

 

en gros, les données seront rafraichies à chaque passage du curseur ....

[bad wolf]

en fait je pense avoir trouvé le cheminement à faire

 

reste juste une chose :

comment récupérer des éléments html dans du javascript??

 

exemple:

en html j'ai ça :

 

<dd>
<img src="truc.jpg" width="100" height="75" />
<strong>BIDULE N°1</strong>blablabla
</dd>

pas de problème pour afficher le contenu de <dd> avec un mouseover

mais avec le même mouseover, peut-on récupérer le nom "BIDULE N°1"??

 

histoire d'en créer une variable et de la balourder à du PHP???

[FreeZou]

Bienvenue au premier tutorial sur l'AJAX

 

alors oui c'est possible, c'est pas très compliqué, faut juste connaître un peu

j'vais te mettre un petit exemple ça devrait t'aider.

 

première chose il te faut un fichier javascript, de dans on va créer une fonction.

 

function requete(type,fichier){

if(window.XMLHttpRequest)
   xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject)
   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
   return(false);
xhr_object.open(type, fichier, false); 
xhr_object.send(null);
if(xhr_object.readyState == 4) 
   return(xhr_object.responseText);
else 
   return '<img src="img/loading.gif" alt="Chargement" />';
   
}

 

C'est ta fonction AJAX, elle prend 2 parametre type (POST ou GET) et fichier (ton script php qui contient l'appel à la bdd).

 

Ex de fichier php :

<?php

  mysql_connect('localhost','toto','titi');
  mysql_selectdb('pirplipinpon');

  $requete = 'select * from bignou';
  $reponse = mysql_query($requete) or die('ouch');
  while($data = mysql_fetch_array($reponse))
  {
     ton code, url photos, etc
  }
  echo  tonblabla; 
?>

 

et enfin la ou tu veux recup/afficher

 

<a onmouseover="affiche(12)">image/texte</a>

 

et la fonction affiche en javascript:

function affiche(id){
  var resultat = requete('GET','tonfichier.php?id_du_truc_que_tu_veux='+id);
document.getElementById('tadiv').innerHTML = resultat;
}

 

Bon alors la c'est une technique un peu roumaine mais très efficace pour comprendre le principe, j'ai fait ça rapidement au boulot, on pourrait bien sur jouer avec le DOM, renvoyer du XML... mais on verra ça dans un autre épisode.

[bad wolf]

Merci

 

de quoi m'occuper demain au taf

[hackchip]

Fait attention aussi aux caractères spéciaux qui ne passent pas.

Pour régler ce problème je me sers de la fonction PHP str_replace.

Voila aussi le script que je me sers dans mes développement, il ne demande aucun emplacement Div, et tu à en bonus un CSS pour donner en autre un effet post-It jaune.

 

Teste Help Tip.7z

 

Avec tout ça je pense que tu devras t’en sortir pour demain.

 

EDITE :

Va sinon ici tu a plein de scripts géniaux => Dynamic Drive DHTML(dynamic html) & JavaScript code library

[bad wolf]

Hmmm ... ok

alors j'ai bien compris le principe, d'ailleurs j'avais déjà fait un peu d'ajax avant

 

sauf que là, la structure est légèrement différente, et vu que je maîtrise pas du tout le javascript, je ne vois pas trop comment adapter les script sans devoir chambouler tout le code de base

 

En fait, je n'utilise pas du tout de javascript (donc de mousover) dans le fichier de "base"

tout est fait dans le fichier javascript

 

en gros mon code :

 

page map.html

...
<script type="text/javascript" src="js/map.js"></script>
...

...
<dt id="table1"><a href="lien.html" class="location" id="location01">Département 1</a></dt>
<dd>
<img src="images1.png" alt="" height="92" width="72">
texte et image affichée par un mouseover
</dd>

page map.js

var mapMaker =
{
...

init: function()
{
...
mapMaker.addEvt(currentLocation,'mouseover',mapMaker.showTooltip);
...
}
showTooltip: function()
{
...
}
}

[FreeZou]

Ah ué tu utilise une classe... c'est plus propre remarque.

si tu peux m'envoyer la source sur msn ce soir que j'regarde un peu de plus près.

[bad wolf]

jt'ai envoyé un lien par MP

je serais pas dispo en soirée

[bad wolf]

Bon déjà,

 

j'ai viré le javascript qui servait à rien (en gros TOUT) pour l'affichage des éléments sur mouseover, je fais tout en CSS, c'est plus "propre"

[bad wolf]

Upppp

 

Bon, le javascript, j'ai vraiment trop de mal

 

ton script freezou, j'arrive pas à le faire fonctionner

le "tadiv", correspond à quoi? à ce qui doit s'afficher dans l'infobulle?

je l'écrit direct dans le javascript ou je met une référence à une div qui se trouverais dans le html???

 

pour le script de Hackship, si je l'ai bien compris, le mouseover est dans la même page que la requete mysql, donc la requete aura quand même lieu même si je ne fais pas de mousover??

 

si c'ets le cas, c'est pas trop ce que je cherche à faire, je veux que la requete ne s'effectue que sur mouseover