Affichage avec une fonction javascript [Résolu]

scorpion11_22 · 08/10/2011, 14h52

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 · 11/10/2011, 22h37

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

Les règles incontournables d'utilisation de ce forum

scorpion11_22 · 12/10/2011, 09h34

Citation:

Envoyé par NoSmoking

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 · 12/10/2011, 14h10

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.

scorpion11_22 · 12/10/2011, 15h00

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

bewidia · 12/10/2011, 15h45

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.

scorpion11_22 · 12/10/2011, 15h52

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 :

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.

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 :

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

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

vu que les areas sont afficher via une boucle :

Code :

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

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 !!

bewidia · 12/10/2011, 16h15

Dans ta boucle qui génère les area, au lieu d'écrire $description, tu écris par exemple

Code :

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

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 :

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

1
2
3
4
 
<div id="departement_45877">
contenu ckeditor pour le departement de l'ain
</div>

et de l'autre tu auras

Code :

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

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")

scorpion11_22 · 12/10/2011, 16h44

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

Code :

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

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 :

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

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 :

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

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 :

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

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

bewidia · 12/10/2011, 17h21

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

scorpion11_22 · 12/10/2011, 17h25

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 !

NoSmoking · 12/10/2011, 22h36

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 :

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

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

devrait être

Code :

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

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

scorpion11_22 · 13/10/2011, 09h18

Bonjour

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

Code :

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

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 :

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

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 :

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

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 :

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

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
 
<!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 !!

bewidia · 13/10/2011, 09h49

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 :

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

1
2
 
<area onmouseover="montre('departement_01')" ....></area>

d'un coté et

Code :

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

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

scorpion11_22 · 13/10/2011, 10h14

Oui effetivement j'ai pas fait gaffe donc :

Code :

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

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

et pour la div :

Code :

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

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 :

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

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

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

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.

bewidia · 13/10/2011, 11h01

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.

scorpion11_22 · 13/10/2011, 11h49

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 :

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

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 :

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

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

et la source :

Code :

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

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

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

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

bewidia · 13/10/2011, 12h12

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 :

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

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 :

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

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

scorpion11_22 · 13/10/2011, 14h04

Ok donc en premier merci pour la remise en place ! Effectivemnt au niveau javascript j'y entrave queu dalle

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 :

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

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 :

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

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 :

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

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 :

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

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

Pour le code source :
1 ere méthode :

Code :

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

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

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

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 :

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

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

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

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

NoSmoking · 13/10/2011, 18h37

ton code généré est toujours incorrect

Code :

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

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

devrait être

Code :

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

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

11/10/2011, 22h37	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 779 Points : 4 779	Bonsoir, merci de mettre le code HTML généré par le PHP. Les règles incontournables d'utilisation de ce forum
	00

12/10/2011, 14h10	#4
bewidia Membre habitué Inscription : octobre 2009 Messages : 122 Détails du profil Informations forums : Inscription : octobre 2009 Messages : 122 Points : 116 Points : 116	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.
	00

12/10/2011, 17h21	#10
bewidia Membre habitué Inscription : octobre 2009 Messages : 122 Détails du profil Informations forums : Inscription : octobre 2009 Messages : 122 Points : 116 Points : 116	- 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 ...
	00

13/10/2011, 11h01	#16
bewidia Membre habitué Inscription : octobre 2009 Messages : 122 Détails du profil Informations forums : Inscription : octobre 2009 Messages : 122 Points : 116 Points : 116	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email