Sqlquery au survol souris et affichage
Résolu/Fermé
morexodrome
-
22 août 2010 à 05:18
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 29 août 2010 à 13:17
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 29 août 2010 à 13:17
A voir également:
- Sqlquery au survol souris et affichage
- Quelle touche pour débloquer la souris ? - Guide
- Autoclick souris - Télécharger - Divers Utilitaires
- Affichage double ecran - Guide
- Souris inversée - Guide
- Changer sens souris 2 ecrans ✓ - Forum Windows
5 réponses
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
22 août 2010 à 17:31
22 août 2010 à 17:31
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!
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!
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
22 août 2010 à 13:15
22 août 2010 à 13:15
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!
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.
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
29 août 2010 à 13:17
29 août 2010 à 13:17
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
N'oublie pas de passer le sujet en "résolu". ^^
A plus et bon courage pour la suite
