Aller au contenu

Lire bdd à partir d'un mouseover ???


bad wolf

Messages recommandés

:hello:

 

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 :P )

 

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

Bienvenue au premier tutorial sur l'AJAX :D

 

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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()
{
...
}
}

Lien vers le commentaire
Partager sur d’autres sites

Upppp

 

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

 

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

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

 

:fou:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
  • Statistiques des membres

    23 028
    Total des membres
    1 033
    Maximum en ligne
    Subaru
    Membre le plus récent
    Subaru
    Inscription
  • Statistiques des forums

    128,1 k
    Total des sujets
    1,7 M
    Total des messages
×
×
  • Créer...