Sujet Précédent Sujet Suivant

Afficher des infos lors d'un survole d'image

Fermé
Mickael86480 Messages postés 638 Date d'inscription vendredi 28 mai 2010 Statut Membre Dernière intervention 11 mars 2021 - 19 oct. 2011 à 15:24
Mickael86480 Messages postés 638 Date d'inscription vendredi 28 mai 2010 Statut Membre Dernière intervention 11 mars 2021 - 24 oct. 2011 à 13:58
Bonjour, cela fait plusieurs jours que j'ai un problème de programmation. Je suis en train de développer un site de géographie, qui dit geo dit cartes de pays, donc sur ces cartes je positionne des "boules" symbolisant les villes du pays sélectionner. Lorsque l'utilisateur survole une de ces boules, il obtient des informations sur la ville correspondantes (nom, nombre d'habitants, ...). Le problème que j'ai ce situe à ce niveau là. Lorsque je survole la boule, rien ne se passe et je n'arrive pas à voir où est le problème donc je fais appel à vous. Voici le code de la page php :

<html>
<head>
<title>Sans Titre</title>
<link href="plan.css" rel="stylesheet" type="text/css">
<link TYPE="text/css" REL="stylesheet" HREF="gfbulle.css">
<link TYPE="text/css" REL="stylesheet" HREF="plan.css">
<script language="JavaScript" type="text/javascript" src="gfbulle.js">
</script>
</head> <STYLE type="text/css"> </STYLE>
<body bgcolor="#ffffaa" class=cor onLoad="jumpScroll()">
<div class="cor3 largeur">
<?php
include ('connection.php') ;
$t=$_GET['pw'];
$nom_pays=$_GET['a'];
$cap=$_GET['b'];
$cont=$_GET['c'];

if($t)
{
$requete="SELECT * FROM pays WHERE id='$t'";
$query=mysql_query($requete) or (mysql_error());

while ($data = mysql_fetch_array($query))
{
echo "
<center><img id=fr src=img/drapeau/".$data['id'].".png border=2 >
<img id=fl src=img/drapeau/".$data['id'].".png border=2 ><br><br><br>
<div class=' pps '>
<b>Nom du pays : </b>".$data['nom_pays']." <br>
<b>Capitale :</b> ".$data['capitale_pays']." <br>
<b>Continent :</b> ".$data['continent']." <br>
<b>Superficie du pays :</b> ".$data['sup']." km² <br>
<b>Nombre d'habitant en 2010 :</b> ".$data['nb_hab']."<br>
<b>Langue(s) officielle(s) du pays :</b> ".$data['langues_off']."<br>
<b>Monnaie :</b> ".$data['monnaie']." <br>
";
if($data['frontieres'] != "")
echo"<b>Frontières :</b> ".$data['frontieres']."<br>";
if($data['littoraux'] != "")
echo"<b>Littoraux :</b> ".$data['littoraux']."<br>";

echo"<b>Forme d'Etat :</b> ".$data['forme_etat']." <br>
<b>Personnage le plus important du pays :</b> ".$data['perso']." <br>
<form action=rech.php method=post>
<input id=fr href=# type=submit NAME=retour value=Retour><br>
<input type='hidden' NAME='nom_pays' value=".$nom_pays.">
<input type='hidden' NAME='capi' value=".$cap.">
<input type='hidden' NAME='conti' value=".$cont.">
</form>
</div></center>
";
echo "<center><img src=img/carte_pays/".$data['id'].".png border=0></center>";
$cap = $data['capitale_pays'] ?>
<A href="affiche.php?p=<?php print($data['id']); ?> "

OnMouseOver="return(BulleWrite('<?php
print ("<span id=fr class=gris><sup >".($data['id'])."</sup></span>");
print ("<b>Nom : </b>".str_replace("'", "'", $cap)."");
?>'));" OnMouseOut=return(BulleHide())>;<?php
echo "<span style='position:absolute; left:".$data['largeurcap']."; top:".$data['hauteurcap'].";'><img src=img/carte_pays/capitale.png border=0></span>
<span style='position:absolute; left:".$data['largeurville1']."; top:".$data['hauteurville1'].";'><img src=img/carte_pays/ville1.png border=0></span>
<span style='position:absolute; left:".$data['largeurville2']."; top:".$data['hauteurville2'].";'><img src=img/carte_pays/ville1.png border=0></span>
<span style='position:absolute; left:".$data['largeurville3']."; top:".$data['hauteurville3'].";'><img src=img/carte_pays/ville1.png border=0></span>
<span style='position:absolute; left:".$data['largeurville4']."; top:".$data['hauteurville4'].";'><img src=img/carte_pays/ville1.png border=0></span>
<span style='position:absolute; left:".$data['largeurville5']."; top:".$data['hauteurville5'].";'><img src=img/carte_pays/ville1.png border=0></span>
"; //capitale.png = boule rouge et ville1.png = boule verte
?> </A> <?php
}
}mysql_close();
?>
</div>
</body>
</html>

Et le code suivant correspond à la page JS :

//-------------------------------------------------------------
// Nom Document : GFBULLE.JS
// Auteur : G.Ferraz
// Objet : Info Bulle...
// Création : 01.12.2003
//-------------------------------------------------------------
// Mise à Jour : 29.05.2006
// Objet : Compatibilité IE6 et DOCTYPE
// -----------------------------------------------------------
// Mise à Jour : 15.09.2006
// Objet : Amélioration et modif suite à commentaires
// -----------------------------------------------------------
// Mise à Jour : 10.11.2006
// Objet : Correction Bug sous FF si document <DIV style="float...">
// -----------------------------------------------------------
var DOM = (document.getElementById ? true : false);
var IE = (document.all && !DOM ? true : false);
var NAV_OK = ( DOM || IE );
var NETSCAPE = ( navigator.appName == 'Netscape');
var Mouse_X; // Position X en Cours de la Mouse
var Mouse_Y; // Position Y en Cours de la Mouse
var Decal_X; // Décalage X entre Pointeur Mouse et Bulle
var Decal_Y; // Décalage Y entre Pointeur Mouse et Bulle
var bBULLE = false; // Flag Affichage de la Bulle
var Fenetre = new RECT(); // pour dimension fenêtre
//-------------
function RECT(){
this.Left =0;
this.Top =0;
this.Right =0;
this.Bottom =0;
}
//---------------------
function GetObjet(div_){
if( DOM) return document.getElementById(div_);
if( IE) return document.all[div_];
return( null);
}
//-- 10.11.2006 ----------------------------
// correction bug sur <DIV style="float...">
//------------------------------------------
function Get_DimFenetre(){
var L_Doc;
var H_Doc;
var DocRef;

with( Fenetre){
if( window.innerWidth){
with( window){
Left = pageXOffset;
Top = pageYOffset;
Right = innerWidth;
Bottom = innerHeight;
//-- Modif du 10.11.2006
L_Doc = document.body.clientWidth;
H_Doc = document.body.clientHeight;
//-- fin modif.
if( Right > L_Doc) Right = L_Doc;
if( Bottom > H_Doc) Bottom = H_Doc;
}
}
else{ // Cas Explorer à part
if( document.documentElement && document.documentElement.clientWidth)
DocRef = document.documentElement;
else
DocRef = document.body;

with( DocRef){
Left = scrollLeft;
Top = scrollTop;
Right = clientWidth;
Bottom = clientHeight;
}
}
//-- limite Maxi Fenêtre Affichage
Right += Left;
Bottom += Top;
}
}
//------------------------------------
function ObjShowAll( div_, x_, y_, z_){
var B_Obj = GetObjet( div_);
var F_Obj = GetObjet( 'F' +div_);
var MaxX, MaxY;
var Haut, Larg;
var SavY = y_;

if( B_Obj){
//-- Récup. dimension du DIV
if( NETSCAPE){
Larg = B_Obj.offsetWidth;
Haut = B_Obj.offsetHeight;
}
else{
Larg = B_Obj.scrollWidth;
Haut = B_Obj.scrollHeight;
}
with( Fenetre){
//-- Réajuste dimension fenêtre
MaxX = Right - Larg;
MaxY = Bottom - Haut;

//-- Application Bornage
if( x_ > MaxX) x_ = MaxX;
if( x_ < Left) x_ = Left;
if( y_ > MaxY) y_ = MaxY;
if( y_ < Top) y_ = Top;
}
//-- si en bas On réajuste
//-- pour que la bulle ne prenne pas le focus
if( y_== MaxY){
var DeltaY = MaxY -SavY;
y_ = MaxY - DeltaY -Haut -2*Decal_Y;
}
with(B_Obj.style){
left = x_ +"px";
top = y_ +"px";
zIndex = z_;
visibility = "visible";
}
}
}
//-- 15.09.2006 ------------------------
// Ajout Fonction Add_Event
//--------------------------------------
function Add_Event( obj_, event_, func_, mode_){
if( obj_.addEventListener)
obj_.addEventListener( event_, func_, mode_? mode_:false);
else
obj_.attachEvent( 'on'+event_, func_);
}
//-- 15.09.2006 ------------------------
// Ajout paramètre x_ et y_
//--------------------------------------

function BulleWrite( txt_, x_, y_){
var O_Bulle = document.getElementById( 'GF_BULLE');
//-- Test oubli parametre ou vide
txt_ = txt_ ? txt_ :"<span style='color:red;'><b>ERREUR<\/b> : paramètre <b>txt_<\/b> omis...<\/span>";
if( O_Bulle){
//-- Recup dimension d'affichage
Fenetre = Win_GetDimension();
// Decalage hors de la Bulle
Decal_X =( x_ ? x_: 5); // Decal_X = 5 par defaut
Decal_Y =( y_ ? y_: 5); // Decal_Y = 5 par defaut
//-- Teste si ID Objet
var tabTmp = txt_.split(':');
if( tabTmp[0].toLowerCase() ==('id')){
var szID = tabTmp[1];
var O_Src = document.getElementById( szID);
if( O_Src){
var O_Clone = O_Src.cloneNode( true);
O_Bulle.appendChild( O_Clone);
O_Clone.style.display = '';
O_Clone.style.visibility = 'visible';
bBULLE= true;
}
else{
//-- ERREUR on previent
txt_ ="<span style=\'color:red;\'\><b>ERREUR<\/b> : Objet ID : [<b>"+ tabTmp[1] +"<\/b>] non définie...<\/span>";
setTimeout( "BulleWrite(\"" + txt_ +"\"," + x_+"," + y_+")", 10);
return( false);
}
}
else{
//-- Ecriture de la Bulle
O_Bulle.innerHTML = "<div class='gfbulle'>" +txt_ +"<\/div>";
}
//-----------------------------------------//
// IMPORTANT on n'affiche pas la Bulle //
// l'evenement MouseOver va avec MouseMove //
//-----------------------------------------//
// ObjShowAll('GF_BULLE', Mouse_X +Decal_X, Mouse_Y +Decal_Y, 1000);
bBULLE= true;
return( true);
}
return(false);
}
//------------------
function BulleHide(){
var B_Obj = GetObjet( 'Bulle');
with(B_Obj){
innerHTML = " "
style.left = -1000 +"px";
style.top = -1000 +"px";
style.zIndex = 0;
style.visibility = "hidden";
}
bBULLE = false;
return(true);
}
//--------------------
function WhereMouse(e){
var DocRef;
//-- On traque les hybrides
if( e && e.target){
Mouse_X = e.pageX;
Mouse_Y = e.pageY;
}
else{
if( document.documentElement && document.documentElement.clientWidth)
DocRef = document.documentElement;
else
DocRef = document.body;

Mouse_X = event.clientX +DocRef.scrollLeft;
Mouse_Y = event.clientY +DocRef.scrollTop;
}

if( bBULLE)
ObjShowAll('Bulle', Mouse_X +Decal_X, Mouse_Y +Decal_Y, 1000);

return( true);
}
//== INITIALISATION ==================================
//-- 15.09.2006 ------------------------
// Ajout Fonction Add_Event
// Permet de faire autre chose...
//--------------------------------------
//document.onmousemove = WhereMouse;
Add_Event( document, 'mousemove', WhereMouse);

//-- Création STYLE Bulle et DIV----------------------
var Html;
//-- On met du style pour la bulle
Html = '<STYLE TYPE="text/css">';
Html += '.Bulle{cursor:default;color:#000000;font-size:13px;font-family:Verdana;}';
Html += '</STYLE>';
//-- Création du DIV Bulle
Html +='<div id="Bulle" style="position:absolute; left:auto;
top:auto; width:auto; height:auto; z-index:0;
visibility:hidden"></div>';
document.write( Html);
//-- EOF ------------------------------------------------------

Le post est un peu long, mais je ne savais pas ce qui pouvait être important.

Merci à tous ceux qui m'aide.

A voir également:

5 réponses

Réponse 1 / 5
DoulyCreations Messages postés 187 Date d'inscription lundi 11 avril 2011 Statut Membre Dernière intervention 23 mars 2015 19
19 oct. 2011 à 15:32
Bonjour,

Ce que tu souhaites faire c'est une infobulle.
Je te conseilles d'en chercher une nouvelle infobulle (ex: https://www.filamentgroup.com/examples/fg-tooltip/

Le rendu est toujours plus simpa avec du Jquery.
Notre cher amis Google pourra t'aider à en trouver une bonne.

Je vois que celle que tu utilises date de 2006 et hélas on est en 2011.
Tout ça pour te dire qu'avec, généralement, des nouveaux plugins ça offre beaucoup plus de possibilités et surtout de compatibilités avec les navigateurs.

Cordialement
0
Mickael86480 Messages postés 638 Date d'inscription vendredi 28 mai 2010 Statut Membre Dernière intervention 11 mars 2021 35
Modifié par Mickael86480 le 19/10/2011 à 15:40
Le lien me dit page no found, mais merci je vais cherché, as-tu des conseils à me donner pour les infobulles, désolé je débute en prog
0
DoulyCreations Messages postés 187 Date d'inscription lundi 11 avril 2011 Statut Membre Dernière intervention 23 mars 2015 19
19 oct. 2011 à 16:15
Il faut prendre le lien sans la parenthèse : https://www.filamentgroup.com/examples/fg-tooltip/
0
Réponse 2 / 5
Mickael86480 Messages postés 638 Date d'inscription vendredi 28 mai 2010 Statut Membre Dernière intervention 11 mars 2021 35
Modifié par Mickael86480 le 19/10/2011 à 16:19
Okey donc voici ce que j'ai fais :

dans un fichier css (code trouver sur internet) :

a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}

a.info:hover{
z-index:25;
background-color:#FFF
}

a.info span{
display: none
}

a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}

et le code php :

<link href="essai.css" rel="stylesheet" type="text/css">
</head> <STYLE type="text/css"> </STYLE>

<a class="info" href="#">texte du lien<span>Votre texte de l'info bulle</span></a>
<img class="info" href="#" src=capitale.png> <span>coucou</span>

Je précise également que le lien texte de la balise <a>, affiche une info bulle, en revanche j'ai essayé ensuite avec une image et la ça pose problème.

Merci de votre aide
0
Réponse 3 / 5
Mickael86480 Messages postés 638 Date d'inscription vendredi 28 mai 2010 Statut Membre Dernière intervention 11 mars 2021 35
Modifié par Mickael86480 le 20/10/2011 à 20:15
Personne peut m'aider, sachant que mon problème est de faire apparaître une info-bulle via une image.

merci de votre aide.
0
Réponse 4 / 5
Mickael86480 Messages postés 638 Date d'inscription vendredi 28 mai 2010 Statut Membre Dernière intervention 11 mars 2021 35
20 oct. 2011 à 20:41
Donc j'ai trouvé une solution :

<img src="mon image" title="coucou" />

sauf que je pense que l'on peut faire mieux seulement je ne vois pas comment merci de m'aider.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Mickael86480 Messages postés 638 Date d'inscription vendredi 28 mai 2010 Statut Membre Dernière intervention 11 mars 2021 35
24 oct. 2011 à 13:58
Personne peut m'aider??
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
=Si la cellule A1 a du texte = B1 devient couleur
jsecours -
huhh -

8 réponses
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses