Affichage avec une fonction javascript

Version imprimable

Bonjour

Voilà je suis un grand débutant avec le javascript et j'essai de faire un affichage au survol d'une zone area shape depuis un champ d'une BDD !

Tout fonctionne bien lorsque l'enregistrement en bdd se fait avec un form et un input type text mais j'ai modifier pour mettre ckeditor et là j'ai plus rien qui s'affiche malgré que le texte soit bien enregistrer en BDD !

Donc j'espere que mes explications sont claire !

Pour inséré le texte enn base de donnée j'utilise ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<?php
if(!empty($_GET['action']))
{
        switch($_GET['action'])
        {
                case 'Modif' :
                        $sql= "SELECT id_dpt,titre_dpt,area_dpt,txt_dpt FROM dpt_fr WHERE id_dpt='" . $_GET['id_dpt'] . "'";
                        $res = mysql_db_query( $bdd , $sql );
                        while ( $Ligne = mysql_fetch_array ( $res ) ) {
                        $id = $Ligne['id_dpt'];
                        $titre = $Ligne ['titre_dpt'];
                        $area = $Ligne ['area_dpt'];    
                        $description = $Ligne['txt_dpt'];
                ?>
			<div align="center">
            <form action="boutik_new.php" name="admin_boutik_new" method="post">
            Nom du département : 
            <br />
            <input type='text' value="<?php echo $titre;?>" name='titre_dpt' size='35'>
            <br />
            Une description :
            <br />
            <textarea cols="75" rows="8" name="txt_dpt" id="txt_dpt"><?php echo $description; ?></textarea>
            <script type="text/JavaScript">
            //<![CDATA[
                CKEDITOR.replace('txt_dpt');
            //]]>
            </script>
            <br />
            <input type="hidden" name="enradmin_boutik_new" value="Modif" />
			<input type="hidden" name="id_dpt" value="<?php echo $id; ?>" />            
            <input type="submit" value="Modifier" />
            </form>
            <br />
            <br />
            <a href="boutik_new.php">Retour</a>
            </div>
		<?php   
                        }
                break;
                
                default :
                        echo "<SCRIPT language=javascript>location.href='boutik_new.php'</SCRIPT>";             
                break;
        }
}
elseif(!empty($_POST['enradmin_boutik_new']))
{
        switch($_POST['enradmin_boutik_new'])
        {
                case 'Modif' :
                        $sql = "UPDATE dpt_fr SET titre_dpt='".$_POST['titre_dpt']."',txt_dpt='".$_POST['txt_dpt']."' WHERE id_dpt='".$_POST['id_dpt']."'";
                        mysql_db_query( $bdd , $sql );
                        echo "<SCRIPT language=javascript>location.href='boutik_new.php?action=Modif&amp;id_dpt=".$_POST['id_dpt']."'</SCRIPT>";
                break;
                
                default :
                        echo "<SCRIPT language=javascript>location.href='boutik_new.php'</SCRIPT>";             
                break;  
        }
}
?>

Ensuite pour l'affichage j'utilise :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script type="text/javascript">
function afficher(info,dept)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
		tooltip.innerHTML = dept;
        run= true ;
}
function masquer(info)
{
        var tooltip = document.getElementById(info) ;
        tooltip.style.visibility = "hidden";
        run= false ;
}
</script>

et dans mon body :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<div class="map"> 
<img style="border:0pt none;opacity:0;" src="France.png" width="500" height="570" usemap="#france"> 
</div>
<map name="france">
 
<?php
$aff = "SELECT id_dpt,titre_dpt,area_dpt,txt_dpt FROM dpt_fr ORDER BY id_dpt";
$res = mysql_db_query ( $bdd , $aff ) or die ( mysql_error ( ) );
        while ( $Ligne = mysql_fetch_array ( $res ) ) {
                $id = $Ligne['id_dpt'];
                $titre = $Ligne ['titre_dpt'];
                $area = $Ligne ['area_dpt'];    
                $description = $Ligne['txt_dpt'];
                
                echo "<area href=\"#\" title=\"".$id." - ".$titre."\" shape='polygon' coords='".$area."'\" onmousemove=\"afficher('info','".$description."')\" onmouseout=\"masquer('info')\">\n";
        }
?>
 
</map>
<br />
<div id="info">
<?php 
$aff = "SELECT id_dpt,titre_dpt,area_dpt,txt_dpt FROM dpt_fr ORDER BY id_dpt";
$res = mysql_db_query ( $bdd , $aff ) or die ( mysql_error ( ) );
while ( $Ligne = mysql_fetch_array ( $res ) ) {
        $id = $Ligne['id_dpt'];
        $titre = $Ligne ['titre_dpt'];
        $area = $Ligne ['area_dpt'];    
        $description = $Ligne['txt_dpt'];
        ?>
	<p><?php echo $description;?></p>
	<?php
}
?>
</div>

Merci

11/10/2011, 22h37
NoSmoking

Bonsoir,
merci de mettre le code HTML généré par le PHP.

:fleche: Les règles incontournables d'utilisation de ce forum

Citation:

Envoyé par NoSmoking

Bonsoir,
merci de mettre le code HTML généré par le PHP.

:fleche: Les règles incontournables d'utilisation de ce forum

GRRrr désolé j'ai oublié de mettre la source !!

Pas grave on va rectifier le tir :
Donc pour faire court j'ai modifier mon script alors je reposte les codes :

Pour l'affichage :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<script language="javascript" type="text/javascript">
<!--
function GetId(id) {
	return document.getElementById(id);
}
 
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e) {
	if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
		if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
			GetId("curseur").style.left=e.pageX + 5+"px";
			GetId("curseur").style.top=e.pageY + 10+"px";
		}
		else { // Modif proposé par TeDeum, merci à  lui
			if(document.documentElement.clientWidth>0) {
				GetId("curseur").style.left=550+event.x+document.documentElement.scrollLeft+"px";//20
				GetId("curseur").style.top=330+event.y+document.documentElement.scrollTop+"px";//10
			} 
			else {
				GetId("curseur").style.left=550+event.x+document.body.scrollLeft+"px";//20
				GetId("curseur").style.top=330+event.y+document.body.scrollTop+"px";//10
			}
		}
	}
}
 
function montre(text) {
	if(i==false) {
	  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
	  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
	  i=true;
	}
}
 
function cache() {
	if(i==true) {
		GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
		i=false;
	}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
//-->
</script>

et dans le body

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<div class="map"> 
<img style="border:0pt none;opacity:0;" src="France.png" width="500" height="570" usemap="#france"> 
</div>
<map name="france">
 
<?php
$aff = "SELECT id_dpt,titre_dpt,area_dpt,txt_dpt FROM dpt_fr ORDER BY id_dpt";
$res = mysql_db_query ( $bdd , $aff ) or die ( mysql_error ( ) );
        while ( $Ligne = mysql_fetch_array ( $res ) ) {
                $id = $Ligne['id_dpt'];
                $titre = $Ligne ['titre_dpt'];
                $area = $Ligne ['area_dpt'];    
                $description = $Ligne['txt_dpt'];
                
                echo "<area href=\"#\" title=\"".$id." - ".$titre."\" shape='polygon' coords='".$area."'\" onmouseover=\"montre('". $description ."')\" onmouseout=\"cache()\">\n";//".$description."
        }
?>
 
</map>
<br />
<?php 
$aff = "SELECT id_dpt,titre_dpt,area_dpt,txt_dpt FROM dpt_fr ORDER BY id_dpt";
$res = mysql_db_query ( $bdd , $aff ) or die ( mysql_error ( ) );
while ( $Ligne = mysql_fetch_array ( $res ) ) {
        $id = $Ligne['id_dpt'];
        $titre = $Ligne ['titre_dpt'];
        $area = $Ligne ['area_dpt'];    
        $description = $Ligne['txt_dpt'];
?>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('<?php echo "$description"; ?>');" onmouseout="cache();"></p>
</div>
<?php
}
?>

ET DONC MAINTENANT LA SOURCE :mouarf:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Elena Deudero Ibiza</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
/*function afficher(info,dept)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
		tooltip.innerHTML = dept;
        run= true ;
}
function masquer(info)
{
        var tooltip = document.getElementById(info) ;
        tooltip.style.visibility = "hidden";
        run= false ;
}*/
</script>
<script language="javascript" type="text/javascript">
<!--
function GetId(id) {
	return document.getElementById(id);
}
 
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e) {
	if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
		if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
			GetId("curseur").style.left=e.pageX + 5+"px";
			GetId("curseur").style.top=e.pageY + 10+"px";
		}
		else { // Modif proposé par TeDeum, merci à  lui
			if(document.documentElement.clientWidth>0) {
				GetId("curseur").style.left=550+event.x+document.documentElement.scrollLeft+"px";//20
				GetId("curseur").style.top=330+event.y+document.documentElement.scrollTop+"px";//10
			} 
			else {
				GetId("curseur").style.left=550+event.x+document.body.scrollLeft+"px";//20
				GetId("curseur").style.top=330+event.y+document.body.scrollTop+"px";//10
			}
		}
	}
}
 
function montre(text) {
	if(i==false) {
	  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
	  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
	  i=true;
	}
}
 
function cache() {
	if(i==true) {
		GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
		i=false;
	}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
//-->
</script>
 
</head>
<body>
<div id="Global">
 
<!-- start header -->
	<div id="Header">
      <div id="Header_ban"></div>
      <span style="margin-left:10px;"><a href="?lang=fr"><img src="images/lang/fr.jpg" title="Fran&ccedil;ais" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=en"><img src="images/lang/gb.jpg" title="English" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=es"><img src="images/lang/es.jpg" title="Espa&ntilde;ol" border="0" /></a></span>
      </span>
	  <div id="Menu">
    <ul>
        <li><a href="index.php?lang=fr">Accueil</a></li>
        <li><a href="vente_dom.php?lang=fr">Vente priv&eacute;e</a></li>
        <li><a href="franchise.php?lang=fr">Franchise</a></li>
        <li><a href="boutik.php?lang=fr">Boutique Pilote</a></li>
        <li><a href="contact.php?lang=fr">Contact</a></li>   
    </ul>
</div>	</div>
<!-- end header -->
 
<!-- start page -->
	<div id="Page">
 
<!-- start content -->
		<div id="Contenu">
			<div class="Texte">
				<div class="Haut"></div>
 
				<div class="Millieu">
                    <p align="center"><h1>e.shop</h1></p>
<!--------------------------------------------------------------------------------------------------------------------------->
 
<div class="map"> 
<img style="border:0pt none;opacity:0;" src="France.png" width="500" height="570" usemap="#france"> 
</div>
<map name="france">
<area href="#" title="11 - Aude" shape='polygon' coords='314,451,311,454,306,464,306,473,298,469,291,473,278,473,276,474,277,480,269,483,265,478,262,479,259,477,258,472,261,471,262,469,259,466,261,464,261,461,260,458,252,453,249,448,257,439,259,441,263,440,264,439,265,441,271,441,271,439,274,438,286,439,285,442,289,447,291,445,292,448,295,447,298,443,300,445,312,449,314,451'" onmouseover="montre('<p>
	<strong>Test aude</strong></p>
<p>
	<strong>test aude</strong></p>
')" onmouseout="cache()">
</map>
<br />
<div id="curseur" class="infobulle">
	<p onmouseover="montre('<p>
	TEST AIN</p>
');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('Allier');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('Alpes de Haute Provence');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('Hautes Alpes');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('Alpes Maritimes');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('Ardèche');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('Ardennes');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('Ariège');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('Aube');" onmouseout="cache();"></p>
</div>
<div id="curseur" class="infobulle">
	<p onmouseover="montre('<p>
	<strong>Test aude</strong></p>
<p>
	<strong>test aude</strong></p>
');" onmouseout="cache();"></p>
</div>
<!--------------------------------------------------------------------------------------------------------------------------->
				</div>
 
				<div class="Bas"></div>
 
			</div>
		</div>
<!-- end content -->
 
		<div style="clear: both;">&nbsp;</div>
	</div>
<!-- end page --> 
</div>
<div id="Footer">
	<p> <a href="Legal.php">Mentions l&eacute;gales</a></p>
    <p>&nbsp;</p>
	<p>Elena Deudero Ibiza &copy; 2011 Tous droits r&eacute;serv&eacute;s</p> 
	<p>Propulsé par <a href="http://www.xxxxxxxxxxx.fr/" title="xxxxxxxxxxxx">xxxxxxxxxxxxxx</a> &copy; 2011</p>
</div></body>
</html>

Bien entendu j'ai reduit la source pour évité un affichage beaucoup trop long !

Merci

12/10/2011, 14h10
bewidia

Tu essaies de montrer ou de cacher un element dont l'ID est "curseur" sauf que ... tu as plusieurs éléments dont l'ID est "curseur".
L'ID doit être unique dans la page.
C'est déjà un problème.

Tu utilises aussi dans tes appels de fonction "montre()" des chaines de caractères avec accents et espaces qui sont destinées à manipuler des éléments de ta page, c'est pas une bonne idée.

Tes blocs "curseur" contiennent des éléments qui sont destinés à apparaître/disparaître et ces éléments sont censés réagir à du mouseover et mouseout, je suis pas sûr que ce soit terrible comme approche (comment faire réagit le mouseout/mouseover si l'élément est caché ?)

Bref, je pense qu'il y a pas mal d'éléments de conception de page qui sont à revoir.
12/10/2011, 15h00
Invité

Citation:

Envoyé par bewidia

Tu essaies de montrer ou de cacher un element dont l'ID est "curseur" sauf que ... tu as plusieurs éléments dont l'ID est "curseur".
L'ID doit être unique dans la page.
C'est déjà un problème.

Tu utilises aussi dans tes appels de fonction "montre()" des chaines de caractères avec accents et espaces qui sont destinées à manipuler des éléments de ta page, c'est pas une bonne idée.

Tes blocs "curseur" contiennent des éléments qui sont destinés à apparaître/disparaître et ces éléments sont censés réagir à du mouseover et mouseout, je suis pas sûr que ce soit terrible comme approche (comment faire réagit le mouseout/mouseover si l'élément est caché ?)

Bref, je pense qu'il y a pas mal d'éléments de conception de page qui sont à revoir.

Comment agir dans ce cas là ?
12/10/2011, 15h45
bewidia
Tu caches toutes les données texte (issues de ton ckeditor) dans des Div avec un ID unique comme par exemple "departement_01", "departement_02" etc.

Sur ta carte avec des area, tu fais des appels du genre
Code:

1 2 onmouseover="montre('departement_01')";
sur par exemple le département de l'Ain.
Dans ta fonction "montre()", tu copies le contenu html de ton Div dont tu passes l'id en paramètre (departement_01) dans ton Div "curseur" qui j'imagine est un genre de popup qui suit le curseur.

Citation:
Envoyé par bewidia
Tu caches toutes les données texte (issues de ton ckeditor) dans des Div avec un ID unique comme par exemple "departement_01", "departement_02" etc.

Sur ta carte avec des area, tu fais des appels du genre
Code:

1 2 onmouseover="montre('departement_01')";
sur par exemple le département de l'Ain.
Dans ta fonction "montre()", tu copies le contenu html de ton Div dont tu passes l'id en paramètre (departement_01) dans ton Div "curseur" qui j'imagine est un genre de popup qui suit le curseur.
Alors là j'ai vraiment rien compris !! Désolé pour mon ignorance !!

Je ne vois pas du tout comment faire vu que je traite tout ça en base de donné !
Comment je fais pour mettre

Code:

onmouseover="montre('departement_01')"; etc...

vu que les areas sont afficher via une boucle :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <?php $aff = "SELECT id_dpt,titre_dpt,area_dpt,txt_dpt FROM dpt_fr ORDER BY id_dpt"; $res = mysql_db_query ( $bdd , $aff ) or die ( mysql_error ( ) ); while ( $Ligne = mysql_fetch_array ( $res ) ) { $id = $Ligne['id_dpt']; $titre = $Ligne ['titre_dpt']; $area = $Ligne ['area_dpt']; $description = $Ligne['txt_dpt']; echo "<area href=\"#\" shape='polygon' coords='".$area."'\" onmouseover=\"montre('". $description ."')\" onmouseout=\"cache()\">\n"; } ?>
Alors là je pense que je suis à côté de la plaque !!:oops:

12/10/2011, 16h15
bewidia
Dans ta boucle qui génère les area, au lieu d'écrire $description, tu écris par exemple
Code:

1 2 "departement_".$id
le but est d'avoir un identifiant unique qui te permettra de choisir la bonne cible.

A coté de ça tu boucles pour créer des div cachés dont l'id est également "departement_".$id et du coup lorsque tu survoles ton area, tu passes en paramètre un identifiant unique qui correspond à l'id du div caché qui contient les informations de ton département .

D'un coté tu auras
Code:

1 2 3 4 <div id="departement_45877"> contenu ckeditor pour le departement de l'ain </div>
et de l'autre tu auras
Code:

1 2 <area href="#" shape='polygon' coords="" onmouseover="montre('departement_45877')">
avec ta fonction "montre(param)" qui va copier le contenu du div dont l'id est passé en param (ici "departement_45877") pour le coller dans ton div "curseur")

Ok donc voilà ce que j'ai essayé :

Code:

1
2
 
echo "<area href=\"#\" shape='polygon' coords='".$area."'\" onmouseover=\"montre('departement_". $id ."')\" onmouseout=\"cache()\">\n";

pour généré les areas

pour la boucle :

Code:

1
2
3
<div id="curseur_<?php echo $id;?>" class="infobulle">
	<p onmouseover="montre('<?php echo $description;?>');" onmouseout="cache();"></p>
</div>

Voiçi le résultat (source) :

Code:

1
2
 
<area href="#" shape='polygon' coords='422,267,425,269,425,275,419,278,419,283,416,286,414,286,414,295,412,307,407,313,397,299,394,300,391,304,386,303,380,303,377,298,374,298,371,290,373,282,378,263,384,264,388,263,393,266,397,273,400,274,400,276,402,276,406,272,409,274,409,276,413,276,418,273,422,267'" onmouseover="montre('departement_01')" onmouseout="cache()">

et pour la div

Code:

1
2
3
4
5
6
 
<div id="curseur_01" class="infobulle">
	<p onmouseover="montre('<p>
	TEST AIN</p>
');" onmouseout="cache();"></p>
</div>

J'ai absolument rien qui s'affiche au survol et il y a un truc qui m'échappe ...:oops:

12/10/2011, 17h21
bewidia

- Tu n'as pas de cohérence entre ton div (id="curseur_01") et ton onmouseover (onmouseover="montre('departement_01')")
- Ton Div doit contenir le texte issu de ckeditor, pas de code javascript
- Tu as encore ta fonction "montre(param)" a développer pour cherche le contenu du div ciblé pour le copier dans ton div "curseur"

Le but est que lorsque tu survoles le département de l'Ain, tu appelles la fonction "montre()" avec le paramètre "departement_01".
La fonction "montre()" va lire le contenu du div caché "departement_01" pour le copier dans le div "curseur" qui sera affiché et qui suivra la souris tant qu'elle est au dessus du département de l'Ain.

Je ne sais pas comment être plus clair ...
12/10/2011, 17h25
Invité

Citation:

Envoyé par bewidia

- Tu n'as pas de cohérence entre ton div (id="curseur_01") et ton onmouseover (onmouseover="montre('departement_01')")
- Ton Div doit contenir le texte issu de ckeditor, pas de code javascript
- Tu as encore ta fonction "montre(param)" a développer pour cherche le contenu du div ciblé pour le copier dans ton div "curseur"

Là ça y est je suis perdu !
Je vois pas du tout comment m'y prendre !
12/10/2011, 22h36
NoSmoking

Citation:

Envoyé par scorpion11_22

Là ça y est je suis perdu !

il faut donc reprendre dans l'ordre, et la première chose qui me viens à l'esprit est, attaches toi à générer un code HTML conforme.

en effet de ce que je vois tes balises AREA sont mal construite, problème avec les guillemets et les cotes

Code:

<area href="#" shape='polygon' coords='422,...,267'" onmouseover="montre('departement_01')" onmouseout="cache()">

devrait être

Code:

<area href="#" shape="polygon" coords="422,...,267" onmouseover="montre('departement_01')" onmouseout="cache()">

Une fois cela réglé on pourra reparler de l'approche, je ne partage pas celle de bewidia, qui reste correcte.

Bonjour

Ok code modifier pour être un peu plus dans ls normes !

Code:

echo '<area href="#" shape="polygon" coords="'.$area.'" onmouseover="montre('. $description .')" onmouseout="cache()">';

Alors pour continur ce sujet j'ai tenté des modifs mais en vain !

La boucle de l'area :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
$aff = "SELECT id_dpt,titre_dpt,area_dpt,txt_dpt FROM dpt_fr ORDER BY id_dpt";
$res = mysql_db_query ( $bdd , $aff ) or die ( mysql_error ( ) );
        while ( $Ligne = mysql_fetch_array ( $res ) ) {
                $id = $Ligne['id_dpt'];
                $titre = $Ligne ['titre_dpt'];
                $area = $Ligne ['area_dpt'];    
                $description = $Ligne['txt_dpt'];
                
                echo '<area href="#" shape="polygon" coords="'.$area.'" onmouseover="montre('. $description .')" onmouseout="cache()">';
        }
?>

Ensuite pour la div d'affichage :

Code:

1
2
3
4
 
<div id="curseur_<?php echo $id;?>" class="infobulle">
	<p><?php echo $description;?></p>
</div>

Elle est dans une boucle php !

les fonctions javascripts :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<script language="javascript" type="text/javascript">
<!--
function GetId(id) {
	return document.getElementById(id);
}
 
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e) {
	if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
		if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
			GetId("curseur").style.left=e.pageX + 5+"px";
			GetId("curseur").style.top=e.pageY + 10+"px";
		}
		else { // Modif proposé par TeDeum, merci à  lui
			if(document.documentElement.clientWidth>0) {
				GetId("curseur").style.left=550+event.x+document.documentElement.scrollLeft+"px";//20
				GetId("curseur").style.top=330+event.y+document.documentElement.scrollTop+"px";//10
			} 
			else {
				GetId("curseur").style.left=550+event.x+document.body.scrollLeft+"px";//20
				GetId("curseur").style.top=330+event.y+document.body.scrollTop+"px";//10
			}
		}
	}
}
 
 
function montre(text) {
	if(i==false) {
	  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
	  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
	  i=true;
	}
}
 
function cache() {
	if(i==true) {
		GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
		i=false;
	}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
//-->
</script>

Et voiçi donc le plus important le code source :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Elena Deudero Ibiza</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<script language="javascript" type="text/javascript">
<!--
function GetId(id) {
	return document.getElementById(id);
}
 
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e) {
	if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
		if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
			GetId("curseur").style.left=e.pageX + 5+"px";
			GetId("curseur").style.top=e.pageY + 10+"px";
		}
		else { // Modif proposé par TeDeum, merci à  lui
			if(document.documentElement.clientWidth>0) {
				GetId("curseur").style.left=550+event.x+document.documentElement.scrollLeft+"px";//20
				GetId("curseur").style.top=330+event.y+document.documentElement.scrollTop+"px";//10
			} 
			else {
				GetId("curseur").style.left=550+event.x+document.body.scrollLeft+"px";//20
				GetId("curseur").style.top=330+event.y+document.body.scrollTop+"px";//10
			}
		}
	}
}
 
 
function montre(text) {
	if(i==false) {
	  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
	  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
	  i=true;
	}
}
 
function cache() {
	if(i==true) {
		GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
		i=false;
	}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
//-->
</script>
 
</head>
<body>
<div id="Global">
 
<!-- start header -->
	<div id="Header">
      <div id="Header_ban"></div>
      <span style="margin-left:10px;"><a href="?lang=fr"><img src="images/lang/fr.jpg" title="Fran&ccedil;ais" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=en"><img src="images/lang/gb.jpg" title="English" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=es"><img src="images/lang/es.jpg" title="Espa&ntilde;ol" border="0" /></a></span>
      </span>
	  <div id="Menu">
    <ul>
        <li><a href="index.php?lang=fr">Accueil</a></li>
        <li><a href="vente_dom.php?lang=fr">Vente priv&eacute;e</a></li>
        <li><a href="franchise.php?lang=fr">Franchise</a></li>
        <li><a href="boutik.php?lang=fr">Boutique Pilote</a></li>
        <li><a href="contact.php?lang=fr">Contact</a></li>   
    </ul>
</div>	</div>
<!-- end header -->
 
<!-- start page -->
	<div id="Page">
 
<!-- start content -->
		<div id="Contenu">
			<div class="Texte">
				<div class="Haut"></div>
 
				<div class="Millieu">
                    <p align="center"><h1>e.shop</h1></p>
<!--------------------------------------------------------------------------------------------------------------------------->
 
<div class="map"> 
<img style="border:0pt none;opacity:0;" src="France.png" width="500" height="570" usemap="#france"> 
</div>
<map name="france">
 
<area href="#" shape="polygon" coords="422,267,425,269,425,275,419,278,419,283,416,286,414,286,414,295,412,307,407,313,397,299,394,300,391,304,386,303,380,303,377,298,374,298,371,290,373,282,378,263,384,264,388,263,393,266,397,273,400,274,400,276,402,276,406,272,409,274,409,276,413,276,418,273,422,267" onmouseover="montre(<p>
	TEST AIN</p>
)" onmouseout="cache()"><area href="#" shape="polygon" coords="342,67,346,69,347,74,345,77,346,80,342,87,340,87,340,100,339,103,334,101,327,105,326,107,328,114,323,117,325,119,324,121,326,123,319,132,311,126,307,122,308,120,306,118,304,117,306,115,305,113,303,112,300,113,300,111,303,111,300,106,302,105,304,100,307,99,305,97,306,93,305,84,303,77,307,70,307,66,319,66,321,64,323,65,328,64,342,67" onmouseover="montre()" onmouseout="cache()"><area href="#" shape="polygon" coords="327,251,333,263,340,266,342,269,341,274,338,278,334,279,334,282,335,293,330,297,327,293,321,293,320,290,307,289,306,287,303,288,299,284,300,281,298,280,288,287,286,286,282,278,276,274,274,270,277,264,285,264,287,261,286,257,288,255,296,252,300,248,304,249,309,254,314,255,317,253,321,256,327,251" onmouseover="montre(Allier)" onmouseout="cache()"><area href="#" shape="polygon" coords="462,364,461,370,459,372,463,377,461,381,456,388,454,392,458,400,464,408,459,407,455,411,456,413,453,414,444,415,443,418,438,415,428,422,424,418,422,420,417,419,411,414,408,413,409,411,406,406,407,403,405,398,409,393,412,393,413,392,418,391,421,393,418,388,422,389,423,381,428,377,431,377,434,381,435,378,438,373,449,377,457,367,462,364" onmouseover="montre(Alpes de Haute Provence)" onmouseout="cache()"><area href="#" shape="polygon" coords="448,339,451,344,453,345,454,351,459,353,464,353,467,363,464,362,462,365,457,367,449,377,438,374,435,378,434,381,431,377,428,378,423,381,422,389,419,388,421,393,418,392,413,393,413,389,404,384,402,380,405,376,409,377,411,376,408,373,411,367,416,367,416,364,417,361,422,360,423,357,435,353,437,355,438,349,434,346,432,342,434,339,441,342,443,340,448,339" onmouseover="montre(Hautes Alpes)" onmouseout="cache()"><area href="#" shape="polygon" coords="461,381,467,388,473,389,481,393,492,389,496,395,494,399,488,407,488,413,475,421,473,425,468,427,466,431,464,427,465,425,459,422,458,417,453,414,455,413,454,410,459,406,464,407,457,400,453,393,455,388,461,381" onmouseover="montre(Alpes Maritimes)" onmouseout="cache()"><area href="#" shape="polygon" coords="375,332,375,342,379,352,378,358,374,362,375,368,372,374,371,387,370,390,365,388,363,387,360,389,360,387,354,391,346,386,344,381,340,373,338,364,344,358,349,356,353,351,355,350,355,348,358,346,359,341,361,342,361,340,362,336,365,335,368,331,373,328,375,332" onmouseover="montre(Ardèche)" onmouseout="cache()"><area href="#" shape="polygon" coords="346,69,349,68,354,70,362,66,363,60,367,56,369,58,367,63,367,67,370,72,369,77,374,77,380,83,386,84,386,87,388,87,385,90,380,89,378,90,379,99,376,103,377,106,373,109,355,107,345,101,340,100,340,87,342,87,347,80,345,77,347,74,346,69" onmouseover="montre(Ardennes)" onmouseout="cache()"><area href="#" shape="polygon" coords="250,448,252,453,260,457,262,461,262,465,260,467,262,469,261,472,258,472,259,477,261,477,265,478,269,483,262,483,261,486,253,488,244,483,241,483,240,486,234,479,228,479,224,475,215,473,214,471,217,465,220,464,220,459,223,455,226,454,232,458,231,453,236,451,234,447,236,446,239,451,242,450,243,448,248,450,250,448" onmouseover="montre(Ariège)" onmouseout="cache()"><area href="#" shape="polygon" coords="364,149,364,152,366,157,371,160,372,169,372,171,366,174,366,178,363,178,359,181,353,182,351,184,348,183,336,184,332,174,329,170,327,172,325,165,321,160,317,158,317,150,319,150,322,145,325,149,333,150,334,147,342,140,348,139,351,140,351,145,354,147,359,149,361,148,364,149" onmouseover="montre(Aube)" onmouseout="cache()"><area href="#" shape="polygon" coords="314,451,311,454,306,464,306,473,298,469,291,473,278,473,276,474,277,480,269,483,265,478,262,479,259,477,258,472,261,471,262,469,259,466,261,464,261,461,260,458,252,453,249,448,257,439,259,441,263,440,264,439,265,441,271,441,271,439,274,438,286,439,285,442,289,447,291,445,292,448,295,447,298,443,300,445,312,449,314,451" onmouseover="montre(<p>
	<strong>Test aude</strong></p>
<p>
	<strong>test aude</strong></p>
)" onmouseout="cache()">
</map>
<br />
<div id="curseur_01" class="infobulle">
	<p><p>
	TEST AIN</p>
</p>
</div>
<div id="curseur_02" class="infobulle">
	<p></p>
</div>
<div id="curseur_03" class="infobulle">
	<p>Allier</p>
</div>
<div id="curseur_04" class="infobulle">
	<p>Alpes de Haute Provence</p>
</div>
<div id="curseur_05" class="infobulle">
	<p>Hautes Alpes</p>
</div>
<div id="curseur_06" class="infobulle">
	<p>Alpes Maritimes</p>
</div>
<div id="curseur_07" class="infobulle">
	<p>Ardèche</p>
</div>
<div id="curseur_08" class="infobulle">
	<p>Ardennes</p>
</div>
<div id="curseur_09" class="infobulle">
	<p>Ariège</p>
</div>
<div id="curseur_10" class="infobulle">
	<p>Aube</p>
</div>
<div id="curseur_11" class="infobulle">
	<p><p>
	<strong>Test aude</strong></p>
<p>
	<strong>test aude</strong></p>
</p>
</div>
<!--------------------------------------------------------------------------------------------------------------------------->
				</div>
 
				<div class="Bas"></div>
 
			</div>
		</div>
<!-- end content -->
 
		<div style="clear: both;">&nbsp;</div>
	</div>
<!-- end page --> 
</div>
<div id="Footer">
	<p> <a href="Legal.php">Mentions l&eacute;gales</a></p>
    <p>&nbsp;</p>
	<p>Elena Deudero Ibiza &copy; 2011 Tous droits r&eacute;serv&eacute;s</p> 
	<p>Propulsé par <a href="http://www.xxxxxxxxxx.fr/" title="xxxxxxxxxxxxxxx">xxxxxxxxxxxxxxxx</a> &copy; 2011</p>
</div></body>
</html>

Bien sur j'ai pas mis toute la source c'est beaucoup trop long, il y a baucoup de département en france !! :D:D

13/10/2011, 09h49
bewidia
Tu as remis $description dans les appels de ta fonction "montre()" et tes div ont encore l'id "curseur_xx"

Bon je pense qu'il faut que tu comprennes d'abord la logique générale.
Lorsque tu survoles un département, tu veux que le texte correspondant à ton département s'affiche, c'est bien ça ?

Donc pour pouvoir relier l'action de survol au texte, il faut utiliser un identifiant unique correspondant à ton div contenant les infos du département.

grosso modo, il faut arriver à ça
Code:

1 2 <area onmouseover="montre('departement_01')" ....></area>
d'un coté et
Code:

1 2 3 4 <div id="departement_01"> texte issu de ckeditor concernant le département de l'ain </div>
de l'autre.

Tant que tu n'arrives pas à comprendre la logique que montre('departement_01') pourra interagir avec <div id="departement_01">, je peux pas plus t'aider
13/10/2011, 10h14
Invité
Oui effetivement j'ai pas fait gaffe donc :

Code:

echo '<area href="#" shape="polygon" coords="'.$area.'" onmouseover="montre("curseur_'. $id .'")" onmouseout="cache()">';

et pour la div :
Code:

1 2 3 <div id="curseur_<?php echo $id;?>" class="infobulle"> <p><?php echo $description;?></p> </div>
Au nivau de la soure pour area :

Code:

<area href="#" shape="polygon" coords="314,451,311,454,306,464,306,473,298,469,291,473,278,473,276,474,277,480,269,483,265,478,262,479,259,477,258,472,261,471,262,469,259,466,261,464,261,461,260,458,252,453,249,448,257,439,259,441,263,440,264,439,265,441,271,441,271,439,274,438,286,439,285,442,289,447,291,445,292,448,295,447,298,443,300,445,312,449,314,451" onmouseover="montre("curseur_11")" onmouseout="cache()">

et pour la div :
Code:

1 2 3 4 5 6 7 <div id="curseur_11" class="infobulle"> <p><p> <strong>Test aude</strong></p> <p> <strong>test aude</strong></p> </p> </div>
Si "je suis logique" (avec un gros doute quand même) par rapport a la source c'est bien ça qu'il me faut puisque dans l'area j'ai bien montre('curseur_11') et la div de réception a bien l'id curseur_11.
13/10/2011, 11h01
bewidia

Maintenant il faut modifier ta fonction montre() pour chercher le contenu innerHTML de l'élément DOM dont tu fournis l'identifiant en paramètre et le copier dans l'élément DOM "curseur" et ça devrait être bon.

oui bon la première partie je pense que maintenant j'ai compris !

Pour la deuxièm partie je suis moins sur et même pas sur du tout alors forcément quand je teste quelque chose ça fonctionne pas !

La fonction montre :
Code:

1 2 3 4 5 6 7 8 9 function montre(info,text) { if(i==false) { document.getElementById(info); GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible. GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html i=true; } }
et dans l'area :
Code:

1 2 echo '<area href="#" shape="polygon" coords="'.$area.'" onmouseover="montre("info","curseur_'. $id .'")" onmouseout="cache()">';
et la source :

Code:

<area href="#" shape="polygon" coords="226,32,225,38,229,42,233,50,236,50,238,55,236,61,234,69,235,73,219,76,200,72,196,66,190,65,183,59,186,56,183,49,179,46,179,39,185,38,185,31,191,29,194,25,205,24,210,27,215,26,218,28,222,28,226,32" onmouseover="montre("info","curseur_974")" onmouseout="cache()">
Code:

1 2 3 4 5 <div id="curseur_01" class="infobulle"> <p><p> TEST AIN</p> </p> </div>

non mais réfléchis à ce que tu écris ...

tu passes 2 paramètres à ta fonction montre() : une chaine de texte qui contient "info" dans tous les cas et ton élément unique.

Au lieu d'utiliser ton identifiant unique, tu utilises la chaine text "info", donc impossible de choisir le bon élément !

Essaie ça :
Code:

1 2 3 4 5 6 7 8 9 function montre(info,text) { if(i==false) { GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible. GetId("curseur").innerHTML = document.getElementById(text).innerHTML; // on copie notre texte dans l'élément html i=true; } }
Code:

1 2 GetId("curseur").innerHTML = document.getElementById(text).innerHTML;
copie le contenu de ton div unique vers le div "curseur".

Sérieusement, tu es en train de développer un site en copiant collant des fonctions et des morceaux de code auxquels tu ne comprends visiblement rien du tout. C'est clairement pas sérieux et tu devrais apprendre les bases du javascript en suivant des tutos plutot que de faire n'importe quoi et risquer des failles dans ton site ...

Ok donc en premier merci pour la remise en place ! Effectivemnt au niveau javascript j'y entrave queu dalle :oops: mais là je suis dans l'urgence !

Après ds qu j'ai un pu de temps promis je m'y met en créant des mini script pour comprendre le fonctionnement et enfin arrivé a le faire tout seul ... même si parfois je suppose que j'aurai besoin d'un renseignement ou deux !!
Je comprend bien qu'il faut que je m'y mette réellement....
Enfin bref revenons à nos moutons !

Donc j'ai modifié comme ceuci :
1 ere modif non fonctionnelle :
Code:

1 2 3 4 5 6 7 function montre(info,text) { if(i==false) { GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible. GetId("curseur").innerHTML = document.getElementById(text).innerHTML; // on copie notre texte dans l'élément html i=true; } }
et

Code:

echo '<area href="#" shape="polygon" coords="'.$area.'" onmouseover="montre("info","curseur_'. $id .'")" onmouseout="cache()">';

2 ieme modif non fonctionnelle aussi :
Donc j'ai modifié comme ceuci :
1 ere modif non fonctionnelle :
Code:

1 2 3 4 5 6 7 function montre(text) { if(i==false) { GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible. GetId("curseur").innerHTML = document.getElementById(text).innerHTML; // on copie notre texte dans l'élément html i=true; } }
et

Code:

echo '<area href="#" shape="polygon" coords="'.$area.'" onmouseover="montre("curseur_'. $id .'")" onmouseout="cache()">';

Pour le code source :
1 ere méthode :

Code:

<area href="#" shape="polygon" coords="422,267,425,269,425,275,419,278,419,283,416,286,414,286,414,295,412,307,407,313,397,299,394,300,391,304,386,303,380,303,377,298,374,298,371,290,373,282,378,263,384,264,388,263,393,266,397,273,400,274,400,276,402,276,406,272,409,274,409,276,413,276,418,273,422,267" onmouseover="montre("info","curseur_01")" onmouseout="cache()">

et
Code:

1 2 3 4 5 <div id="curseur_01" class="infobulle"> <p><p> TEST AIN</p> </p> </div>
et aucun affichage au passage de la souris !
2ieme méthode :
idem

Code:

<area href="#" shape="polygon" coords="422,267,425,269,425,275,419,278,419,283,416,286,414,286,414,295,412,307,407,313,397,299,394,300,391,304,386,303,380,303,377,298,374,298,371,290,373,282,378,263,384,264,388,263,393,266,397,273,400,274,400,276,402,276,406,272,409,274,409,276,413,276,418,273,422,267" onmouseover="montre("curseur_01")" onmouseout="cache()">

et
Code:

1 2 3 4 5 <div id="curseur_01" class="infobulle"> <p><p> TEST AIN</p> </p> </div>
et aucun affichage au passage de la souris !

merci

13/10/2011, 18h37
NoSmoking
ton code généré est toujours incorrect
Code:

1 2 <area href="#" shape="polygon" coords="422,267,425,...,267" onmouseover="montre("info","curseur_01")" onmouseout="cache()">
devrait être

Code:

<area href="#" shape="polygon" coords="422,267,425,...,267" onmouseover="montre('info','curseur_01')" onmouseout="cache()">

toujours un problème d'alternance des guillemets et des quotes.
14/10/2011, 09h14
Invité

Bonjour

Ok pour les guillemet et les cote voilà ce que j'ai fait :

Code:

echo "<area href=\"#\" shape=\"polygon\" coords=\"".$area."\" onmouseover=\"montre('info','curseur_". $id ."')\" onmouseout=\"cache()\">";

voilà pour la soure :

Code:

<area href="#" shape="polygon" coords="422,267,...,422,267" onmouseover="montre('info','curseur_01')" onmouseout="cache()">

Si je ne m'abuse c'est bien ça qu'il faut faire.
Par contre j'ai beau lire et relire les tutoriels et je ne pige toujours pas comment faire ce fameux affichage au survol de la souris avc mes infos en html ? :oops:

Pas simple .....
14/10/2011, 09h52
bewidia
Bon déjà supprime le paramètre 'info' dans ton appel à la fonction montre(), ça ne sert à rien.
Ensuite dans ta fonction montre(), fais un
Code:

1 2 alert(document.getElementById(text).innerHTML);
est-ce que l'alerte affiche le contenu html ?

Ensuite utilises tu la console d'erreur de javascript pour voir s'il y a des choses qui s'y passent ?
14/10/2011, 10h04
Invité

Ok j'ai viré le info qui sert a rien et j'ai mis le alert dans ma fonction !
Donc j'ai bien la boite d'alerte qui s'ouvre ! (voir image ci-dessous)
http://www.elenadeuderoibiza.com/screen_alert.jpg
Donc j'ai bien du html qui s'affiche !
Pour la console de déboguage javascript je ne l'ai jamais utilisé donc je vais l'essayer avec firefox !
15/10/2011, 09h17
NoSmoking

as tu au moins une DIV qui as pour id="curseur" dans ton code, <div id="curseur"></div> afin de recevoir le HTML que tu veux lui injecter.

nota:
Dans le code que t'affiche l'alert il y a un déséquilibre de <p> et de </p>
15/10/2011, 09h28
Invité
Bonjour

Oui j'ai bien la div curseur :
Code:

1 2 3 <div id="curseur_<?php echo $id;?>" class="infobulle"> <p><?php echo $description;?></p> </div>
Le déséquilibre est du je pense a l'enregistrement du texte en base de donnée vu qu'il est créé avec ckeditor ! (à confirmé)
15/10/2011, 09h33
NoSmoking

NON, je parle d'une DIV id="curseur", UNIQUEMENT pas id="curseur_0x".
15/10/2011, 12h07
Invité

Citation:

Envoyé par NoSmoking

NON, je parle d'une DIV id="curseur", UNIQUEMENT pas id="curseur_0x".

Non j'ai uniquement celle que je viens de poster dans mon message précédent !

Edit : Merci pour la div id="curseur" maintenant ça fonctionne !

Je met en résolu

MERCI A VOUS POUR L'ENORME COUP DE MAIN Z'ETES SIMPA !! :ccool: