Sqlquery au survol souris et affichage [Résolu/Fermé]

Signaler
-
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
-
Bonsoir a tous.
Je cherche a faire quelque chose qui va vous parraitre bete, mais je bloque quelque peu dessus.

J'ai un tableau, et je souhaiterais qu'au passage de la souris sur une case, un menu s'afficheau niveau du curseur, ou meme dans la case en question en y incluant une fonction php.

en gros, au survol sur la case 1,
'mysql_query 'select * from table where cell=1'
$a_afficher = mysql_fetch_array($sql);
echo $a_afficher; "

au survol de la case 2
'mysql_query 'select * from table where cell=2'
$a_afficher = mysql_fetch_array($sql);
echo $a_afficher; "

Ma 1ere question concerne l'acquisition de la valeur CELL. Comment faire pour la retransmettre dans ma requete en fonction de la case sur laquelle je me trouve?

Ma 2eme question concerne la génération de l'affichage du resultat, a savoir l'ouverture d'un iframe ou d'un menu style popup qui disparaitrait si la souris n'est plus sur le tableau.

Existe t'il une ou plusieurs solutions pour arriver a ce resultat?

Merci par avance de vous casser la tete sur mon probleme.


5 réponses

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
OK pour la méthode 3, qui me paraît encore plus justifiée dans le cas que tu veux développer.

Cependant, l'idée d'un tableau ne me paraît pas adaptée pour le survol de régions d'une carte de France. je te conseille plutôt une image map.
Plus d'infos ici en anglais: http://www.javascriptkit.com/howto/imagemap.shtml

Cette méthode aura comme avantage de mieux coller à la forme de la région survolée. Les area peuvent être combinées.

Ensuite, 2 méthodes possibles:
- afficher un <div> contenant les données via le survol de l'area en CSS , grâce à la propriété étendue :hover .
- Attribuer un évènement onMouseHover aux areas pour afficher le <div> contenant les données.

Dans les 2 cas, le tableau est inutile. un tableau n'a pour vocation première que d'afficher des données organisées, et ne doit jamais être utilisé pour le design et le positionnement du texte dans la page. Pour le positionnement, il faut utiliser des <div> et les placer grâce au CSS.

Bon courage à toi!
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 72521 internautes nous ont dit merci ce mois-ci

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Bonjour,

Je comprends ton problème.

Mais je vois 2 problèmes:
1- Les données à afficher pour chaque cellule sont côté serveur. Il faut donc les rapatrier sans provoquer de rechargement de page.
2- Les cellules d'un tableau sont normalement petites. autrement dit, si l'utilisateur bouge sa souris et lui fait traverser l'écran, on survolera plusieurs cellules, et ça fera autant de cellules survolées que de requêtes envoyées au serveur.

Maintenant, concernant tes propositions techniques: l'iframe, on oublie. ça ne sera d'aucune utilité. Le "menu style pop-up" est plus adapté, si par là on utilise les propriétés CSS et des conteneurs du style DIV. Pas question de lancer un pop-up javascript tout bête, ça sera de toute manière bloqué par le navigateur.

Pour les solutions techniques maintenant. je vois 3 solutions:
1- Rester sur ton idée, et utiliser jquery et l'ajax pour: détecter le survol d'une cellule; lancer la requête ajax au serveur; récupérer la réponse et l'inclure dans un conteneur (div par exemple) qui s'afficherait au niveau de la cellule ou de la souris. Le problème est la surcharge serveur. autant de fois que l'utilisateur passera sur une cellule, cela fera une requête au serveur. La méthode n'est donc pas adaptée à mon avis.
2- Rester sur la 1ère idée, mais ajouter un bouton à chaque cellule pour accéder aux données, et non pas le faire au survol. Cette solution me paraît valable, mais diffère dans le fonctionnement initialement prévu (un clic au lieu du survol)
3- Récupérer TOUTES les données qui pourraient être appelée par les cellules, et les préparer au moment du chargement initial de la page. Ainsi, seul le survol de la case suffirait à afficher la donnée, mais sans que le serveur soit sollicité. Je ne sais pas quel type de données tu récupères, leur grosseur, si elles sont dynamiques ou statiques, mais si cette solution est possible elle me semble être la plus légère. Attention cependant, il risque quand même d'y avoir un ralentissement dans l'utilisation de la page pour l'utilisateur, mais c'est à tester.

Voilà mes propositions, à toi de jouer! bon courage!
Merci beaucoup pour ta réponse.
Vu ce que je veux faire, je pense que la 3eme solution serait la plus adaptée.
Le but est, pour tous les membres du site, de pouvoir voir sur une carte de France qui est dans telle ou telle région au passage de la souris. (5 données par membres, stockées dans une table sql)

Arrêtes moi si je me trompe.

je fais ma requête sur, on va dire 5 zones différentes, correspondant a 5 cases de mon tableau, avec ma carte en background.
au survol case 1,
div id=zone1 onmousehover (showcell1, true) onmouseout (showcell1,false)
etc etc

Cette méthode te parait elle concevable?

Un grand merci encore pour le coup de main, ca me permet de savoir sur quelle méthode partir.
Merci a toi pour ton aide.
Grace a toi, tout marche pour le mieux.
Si jamais tu as besoin du code, le voici.

<style>
#carte {float:left;}
#zone1 {display:none;}
</style>

<div id="carte" width="600px" height="637px">
<IMG SRC="../modules/img/carte.png" WIDTH="600px" HEIGHT="637px" BORDER="1" USEMAP="#carte">
<MAP NAME="carte">
<AREA SHAPE="poly" COORDS="0,0,290,0,290,200,350,210,350,300,325,325,275,325,250,270,180,270,180,325,0,325,0,0" onmouseover= "montre('zone1',true);" onmouseout = "montre('zone1',false);" HREF="">
<AREA SHAPE="poly" COORDS="290,0,290,130,380,140,380,200,350,210,350,300,600,320,600,0,295,0" onmouseover= "montre('zone2',true);" onmouseout = "montre('zone2',false);" HREF="#zone2">
<AREA SHAPE="poly" COORDS="290,130,380,140,380,200,350,210,290,200,290,130" onmouseover= "montre('zone5',true);" onmouseout = "montre('zone5',false);" HREF="#zone5">

<AREA SHAPE="poly" COORDS="0,637,305,637,305,525,375,490,350,435,320,435,325,325,275,325,250,270,180,270,180,325,0,325,0,637" onmouseover= "montre('zone3',true);" onmouseout = "montre('zone3',false);"
HREF="#zone3">

<AREA SHAPE="poly" COORDS="
305,637,305,525,375,490,350,435,320,435,325,325,275,325,250,270,350,300,600,320,600,637,305,637" onmouseover= "montre('zone4',true);" onmouseout = "montre('zone4',false);"
HREF="#zone4">
</MAP>
</div>
<div id="texte" width="424px">

<div id="zone1" >
<?php
$req = mysql_query("select * from enqueteur WHERE zone='1' ORDER BY pseudo");
while ($ligne = mysql_fetch_array($req))
{$enqs[] = array('nom' => $ligne['nom'], 'pseudoo' => $ligne['pseudo'], 'prenom' => $ligne['prenom'], 'departement' => $ligne['departement'], 'photo' => $ligne['photo'], 'date' => $ligne['date'], 'contact' => $ligne['contact'], 'role' => $ligne['role']);};?>
<?php foreach ($enqs as $enq): ?>
<table border="1" >
<td rowspan="3"><img width="90px" height="120px" src="./enqueteurs/photo/<?php echo $enq['photo'];?>.png"></td>
<td width="120px"><?php echo $enq['pseudoo'];?></td><tr>
<td><?php echo $enq['nom'];?></td><tr>
<td><?php echo $enq['departement'];?>departement</td><tr>
<td><?php echo $enq['role'];?>role</td>
<td><?php echo $enq['contact'];?>contact</td>
<?php if ($rang<3) { ?>
<td><?php echo $enq['date'];?>date</td>
<?php } ?>
</table>
<?php endforeach; unset($enqs); ?></div>


Merci encore, ton aide m'a été tres utile
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Mais de rien, ce forum est là pour ça, et ça me fait plaisir d'avoir des nouvelle, peu de gens répondent pour dire que ça marche et dire merci. ^^

N'oublie pas de passer le sujet en "résolu". ^^

A plus et bon courage pour la suite