Discussion :

[Invité]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

Les règles incontournables d'utilisation de ce forum

[Invité]

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[Invité]

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.