Affichage de carte

Bonjour,

Je dispose d'un code source de site web, et j'aimerais savoir comment faire pour afficher une image en gif animé (un drapeau) par dessus une carte interactive.

Mon problème vient du fait que le gif animé scintille au passage de la souris et j'aimerais que le drapeau animé reste fixe et que la souris n'ait aucun effet sur ce drapeau (pas de main, pas de lien).

Mon but : il faut faire en sorte que la souris ne reconnaisse pas le drapeau lors de son passage. (faire en sorte qu'il n'existe plus mais reste affiché)

Voila mon 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
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
 
       <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="content-Language" content="fr" />
        <meta name="generator" content="jEdit 4.2">
		<link rel="stylesheet" type="text/css" href="/style/style.css">
		<SCRIPT LANGUAGE='Javascript1.2' SRC="/script/fonctMenu.js"></SCRIPT>
		<SCRIPT type="text/javascript" language="Javascript1.2">  
		<!-- Fonction Affichage des drapeaux sur différentes zones -->
		function Position(sequence)
		{
			if (sequence ==0) //Zone hors de la carte//
				{
					document.getElementById("drapeau").style.visibility="hidden";
					document.getElementById("drapeau").style.position="absolute";
					document.getElementById("drapeau").style.top=document.getElementById('carte').offsetTop;
					document.getElementById("drapeau").style.left=document.getElementById('carte').offsetLeft;
				}
			if (sequence ==1) //Zone Correze//
				{
					document.getElementById("drapeau").onmouseover="document.imgdrap.src='/image/drapeau.gif'";
					document.getElementById("drapeau").href.value="fnopenapp.asp?app=6&lien=/Webccanl";
					document.getElementById("drapeau").style.visibility="";
					document.getElementById("drapeau").style.display="block";
					document.getElementById("drapeau").style.top=document.getElementById('carte').offsetTop+170;
					document.getElementById("drapeau").style.left=document.getElementById('carte').offsetLeft+100;
					document.getElementById("drapeau").style.position="absolute";
				}
				if (sequence ==2) //Zone Allier//
				{
					document.getElementById("drapeau").href.value="fnopenapp.asp?app=6&lien=/Webccanl";
					document.getElementById("drapeau").style.visibility="";
					document.getElementById("drapeau").style.display="block";
					document.getElementById("drapeau").style.top=document.getElementById('carte').offsetTop-40;
					document.getElementById("drapeau").style.left=document.getElementById('carte').offsetLeft+280;
					document.getElementById("drapeau").style.position="absolute";
				}
				if (sequence ==3) //Zone Creuse//
				{
					document.getElementById("drapeau").href.value="fnopenapp.asp?app=6&lien=/Webccanl";
					document.getElementById("drapeau").style.visibility="";
					document.getElementById("drapeau").style.display="block";
					document.getElementById("drapeau").style.top=document.getElementById('carte').offsetTop+50;
					document.getElementById("drapeau").style.left=document.getElementById('carte').offsetLeft+100;
					document.getElementById("drapeau").style.position="absolute";
				}
				if (sequence ==4) //Zone Cantal//
				{
					document.getElementById("drapeau").href.value="fnopenapp.asp?app=6&lien=/Webpdd";
					document.getElementById("drapeau").style.visibility="";
					document.getElementById("drapeau").style.display="block";
					document.getElementById("drapeau").style.top=document.getElementById('carte').offsetTop+160;
					document.getElementById("drapeau").style.left=document.getElementById('carte').offsetLeft+280;
					document.getElementById("drapeau").style.position="absolute";
				}
				if (sequence ==5) //Zone Puy de dome//
				{
					document.getElementById("drapeau").href.value="fnopenapp.asp?app=6&lien=/Webpdd";
					document.getElementById("drapeau").style.visibility="";
					document.getElementById("drapeau").style.display="block";
					document.getElementById("drapeau").style.top=document.getElementById('carte').offsetTop+70;
					document.getElementById("drapeau").style.left=document.getElementById('carte').offsetLeft+290;
					document.getElementById("drapeau").style.position="absolute";
				}
				if (sequence ==6) //Zone Haute-Loire//
				{
					document.getElementById("drapeau").href.value="fnopenapp.asp?app=6&lien=/Weblhl";
					document.getElementById("drapeau").style.visibility="";
					document.getElementById("drapeau").style.display="block";
					document.getElementById("drapeau").style.top=document.getElementById('carte').offsetTop+115;
					document.getElementById("drapeau").style.left=document.getElementById('carte').offsetLeft+500;
					document.getElementById("drapeau").style.position="absolute";
				}
				if (sequence ==7) //Zone Loire//
				{
					document.getElementById("drapeau").href.value="fnopenapp.asp?app=6&lien=/Weblhl";
					document.getElementById("drapeau").style.visibility="";
					document.getElementById("drapeau").style.display="block";
					document.getElementById("drapeau").style.top=document.getElementById('carte').offsetTop+10;
					document.getElementById("drapeau").style.left=document.getElementById('carte').offsetLeft+470;
					document.getElementById("drapeau").style.position="absolute";
				}
		}
		<!--
			preloadImages();
			tryToLoad();
		-->
		</SCRIPT></P>
	</HEAD>
 
	<BODY bgcolor=#FFFFFF leftMargin=0 topMargin=0 marginheight=0 marginwidth=0 >
		<!--#include virtual="/include/entete.inc"-->
		<!--#include virtual="/include/menu.inc"-->
		<DIV id=corps>
			<IMG id=carte NAME=imgcart SRC="/image/carte.jpg" HEIGHT=490px usemap=#map border=0>
			<MAP name=map>
			<!-- CCANL -->
			<area shape="poly" coords="206,412,204,391,202,375,209,374,199,365,207,355,213,341,217,335,214,327,239,296,231,288,240,278,256,278,264,273,263,263,258,255,250,248,246,241,253,232,249,225,239,227,230,235,218,240,216,247,206,252,202,249,193,250,188,248,174,252,159,250,148,259,137,264,129,276,114,279,98,289,84,300,66,302,43,310,31,314,24,324,14,330,19,340,17,352,13,360,14,369,16,390,19,408,33,420,48,419,58,420,66,434,83,429,102,427,125,431,142,437,161,431,173,418,194,414" href="fnopenapp.asp?app=6&lien=/Webccanl" target="_blank" onmouseover="Position(1); document.imgcart.src='/image/Correze.jpg'" onmouseout="document.imgcart.src='/image/carte.jpg'; Position(0)" />
			<area shape="poly" coords="469,107,457,109,457,87,447,81,439,76,431,82,421,80,401,82,382,52,364,46,360,61,349,72,336,67,329,77,318,77,301,83,287,82,274,81,264,73,235,76,217,87,203,103,207,113,189,119,178,127,166,143,173,151,193,151,213,151,228,156,250,160,278,155,302,149,312,155,331,152,341,156,359,143,373,139,400,131,408,138,431,141,447,145,456,138,464,137,461,123" href="fnopenapp.asp?app=6&lien=/Webccanl" target="_blank" onmouseover="Position(2); document.imgcart.src='image/Allier.jpg'" onmouseout="document.imgcart.src='/image/carte.jpg'; Position(0)" />
			<area shape="poly" coords="166,145,143,153,124,158,97,157,71,159,63,162,45,168,25,172,12,186,11,195,11,208,17,239,29,239,40,244,50,252,59,265,73,269,76,277,89,279,98,272,112,277,127,274,137,263,152,253,160,248,178,251,193,245,207,249,218,244,221,235,235,232,246,224,230,222,224,212,232,201,239,193,245,184,249,176,241,166,228,155,208,153,187,153,174,152" href="fnopenapp.asp?app=6&lien=/Webccanl" target="_blank" onmouseover="Position(3); document.imgcart.src='/image/Creuse.jpg'" onmouseout="document.imgcart.src='/image/carte.jpg'; Position(0)" />
 
			<!-- Puy De Dome -->
			<area shape="poly" coords="214,373,201,363,210,351,219,333,218,328,242,294,234,287,241,280,260,278,267,274,265,260,299,256,305,265,318,262,345,266,365,276,387,271,405,277,421,277,439,280,446,289,459,291,467,304,469,358,459,363,451,365,451,377,440,377,432,378,432,389,427,396,427,423,421,429,407,411,399,409,386,398,372,399,366,393,354,391,341,398,330,415,331,427,326,434,322,447,315,451,316,459,296,467,269,470,258,476,246,474,237,463,231,447,217,431,210,418,206,394,205,377" href="fnopenapp.asp?app=6&lien=/Webpdd" target="_blank" onmouseover="Position(4); document.imgcart.src='/image/Cantal.jpg'" onmouseout="document.imgcart.src='/image/carte.jpg'; Position(0)" />
			<area shape="poly" coords="231,157,246,160,268,157,298,149,312,156,328,153,336,158,351,150,364,142,394,134,407,140,433,143,455,153,462,166,478,178,489,183,510,188,526,195,543,204,534,218,522,221,516,227,490,227,488,232,471,225,450,234,424,238,408,254,395,266,370,273,351,272,331,262,311,262,302,261,295,256,263,255,250,249,249,243,255,234,254,225,244,223,232,221,226,212,233,202,237,189,243,179,241,172" href="fnopenapp.asp?app=6&lien=/Webpdd" target="_blank" onmouseover="Position(5); document.imgcart.src='/image/Puy_de_dome.jpg'" onmouseout="document.imgcart.src='/image/carte.jpg'; Position(0)" />
 
			<!-- Loire Haute Loire -->
			<area shape="poly" coords="391,270,405,261,421,241,432,236,436,239,447,235,467,229,471,225,487,233,494,226,509,229,518,227,518,222,531,221,541,209,548,207,565,210,579,218,591,215,601,219,608,215,614,218,626,219,643,222,652,226,650,235,658,243,654,251,654,265,645,306,636,307,633,325,619,331,610,334,609,341,602,346,599,358,588,365,569,361,565,356,545,359,536,354,527,355,526,366,508,373,488,370,481,358,471,347,467,320,468,311,467,301,462,296,459,291,447,289,442,284,436,279,421,274,407,274,397,273" href="fnopenapp.asp?app=6&lien=/Weblhl" target="_blank" onmouseover="Position(6); document.imgcart.src='/image/Haute-Loire.jpg'" onmouseout="document.imgcart.src='/image/carte.jpg'; Position(0)" />
			<area shape="poly" coords="468,107,462,118,459,129,466,139,446,140,446,147,462,153,463,166,480,174,497,187,517,190,536,198,548,205,575,211,586,214,601,214,617,215,637,218,653,224,655,238,660,248,664,233,667,213,672,193,663,183,663,170,646,156,627,160,607,165,584,158,572,139,564,127,542,113,544,94,539,84,532,81,522,91,514,88,499,94,482,101" href="fnopenapp.asp?app=6&lien=/Weblhl" target="_blank" onmouseover="Position(7); document.imgcart.src='/image/Loire.jpg'" onmouseout="document.imgcart.src='/image/carte.jpg'; Position(0)" />
			</MAP>
				<DIV id=drap>
					<IMG id=drapeau NAME=imgdrap SRC="/image/drapeau1.gif" HEIGHT=160px border=0 sequence=0 style="display:none; visibility:hidden; top=0; left=0"href="#">
				</DIV>
			</DIV>
		<!--#include virtual="/include/lienbasdepage.inc"-->
	</BODY>
</HTML>

Bonsoir et bienvenue sur DVP

Citation:

Mon problème vient du fait que le gif animé scintille au passage de la souris et j'aimerais que le drapeau animé reste fixe et que la souris n'ait aucun effet sur ce drapeau (pas de main, pas de lien).

j'ai quand même un peu de mal à visualiser l'ensemble, mais il semblerait que tu ais des soucis de mouseover/out qui entrent en conflit.

Quant à supprimer la "main" et/ou le lien, il te suffit de ne pas mettre ton drapeau dans une balise A, ou de changer le curseur en cursor:default;

Oui merci de ta réponse, elle m'a beaucoup aidé, j'ai résolu mon problème. :)

Quoiqu'il en soit, il me reste un dernier problème à résoudre :
la compatibilité sous Google Chrome et Firefox ? Tu dois avoir une idée ?

Sous internet explorer 8, ça marche à merveilles mais sous google chrome ma fonction "POSITION()" a du mal à se lancer correctement, du coup je vois que ma carte interactive ne s'active pas et les drapeaux sur celle ci non plus...

Merci de ta réponse.

Cordialement.

Bonjour,

Il me manque l'élément 'offset' compatible pour chrome...

en gros cela doit ressembler a ce code :

Code:

imgdrap.style.offsetTop= imgdrap.style.offsetTop + 125;

Mais ce code ne fonctionne pas sous chrome , il fonctionne sur Internet explorer 8.

Pouvez-vous m'aidez ?

Voila le reste du 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
 
function Position(sequence)
{
	if (sequence ==0) //Zone hors de la carte//
	{
	//Pour Chrome et Firefox
	if (navigator.userAgent.indexOf(' Chrome/') > -1) 
		{
		imgdrap.style.visibility = 'hidden';
		imgdrap.style.display = 'none';
		imgdrap.style.position="absolute";
		}
	//Pour IE 7
	if (navigator.userAgent.indexOf(' MSIE ') > -1) 
		{
		document.imgdrap.style.visibility="hidden";
		document.imgdrap.style.position="absolute";
		document.imgdrap.style.top=document.imgcart.offsetTop;
		document.imgdrap.style.left=document.imgcart.offsetLeft;
		}
	}
 
 
 
	if (sequence ==1) //Zone Correze// 19
	{
	//Pour Chrome et Firefox
	if (navigator.userAgent.indexOf(' Chrome/') > -1) 
		{
		imgdrap.style.visibility='visible';
		imgdrap.style.display='block';
		imgdrap.style.position='absolute';
		imgdrap.href.value='fnopenapp.asp?app=6&lien=/Webccanl';
		imgdrap.Left = imgdrap.offset().left+127;//---> Ne fonctionne pas
		imgdrap.Top = imgdrap.offset().top+125;//---> Ne fonctionne pas
		}
	//Pour IE 7
	if (navigator.userAgent.indexOf(' MSIE ') > -1) 
		{
		document.imgdrap.href.value="fnopenapp.asp?app=6&lien=/Webccanl";
		document.imgdrap.style.visibility="visible";
		document.imgdrap.style.display="block";
		document.imgdrap.style.top=document.imgcart.offsetTop+127;
		document.imgdrap.style.left=document.imgcart.offsetLeft+125;
		document.imgdrap.style.position="absolute";
		}
	}

Voici mon screenshot : http://img15.hostingpics.net/pics/865093bug.jpg

Merci de votre aide :)

La première chose à faire c'est d'oublier ta façon de récupérer l'élément IMG, il existe depuis fort longtemps une méthode universelle, getElementById((id_element).

Donc commence dans ta fonction par récupérer cet élément
Code:

1 2 3 4 function Position(sequence){ // récupération universelle de l'élément IMG var oImg = document.getElementById('drapeau'); var oCart= document.getElementById('carte');
ensuite tu références oImg et oCart
Code:

1 2 3 oImg.style.visibility = 'hidden'; oImg.style.display = 'none'; oImg.style.position = 'absolute';
ensuite inutile de faire suivant le navigateur.

Lorsque tu écris
Code:

1 2 imgdrap.Left = imgdrap.offset().left+127;//---> Ne fonctionne pas imgdrap.Top = imgdrap.offset().top+125;//---> Ne fonctionne pas
il est normal que cela ne fonctionne pas, Left/Top n'est pas une propriété reconnu et offset() n'est pas une méthode, il te faut écrire
Code:

1 2 oImg.style.left = (oCart.offsetLeft +127) +'px'; oImg.style.top = (oCart.offsetTop +125) +'px';
ce que tu fais d'ailleurs pour IE, de plus il est IMPERATIF d'ajouter l'unité.

Autre erreur

Code:

imgdrap.href.value='fnopenapp.asp?app=6&lien=/Webccanl';

l'attribut href, n'a pas de value

si on résume cela devrait donner un truc bien plus simple du style de
Code:

1 2 3 4 5 6 oImg.href = 'fnopenapp.asp?app=6&lien=/Webccanl'; oImg.style.visibility = 'visible'; oImg.style.display = 'block'; oImg.style.top =(oCart.offsetTop +127) +'px'; oImg.style.left =(oCart.offsetLeft +125) +'px'; oImg.style.position = 'absolute';
reste à savoir si il est judicieux d'utiliser à la fois display et visibility.

Salut a toi !

Merci pour ces explications très précises !

Tous marche parfaitement bien !!

Il est vrai que display et visibility ça revient au même fonctionnement.

Merci !!!!!

Citation:

Il est vrai que display et visibility ça revient au même fonctionnement.

Pas tout a fait !
visiblity:hidden masque l'objet, mais il reste dans le flux

display:none retire l'objet du flux

Oui j'ai remarqué ça lorsque je testais sur ma page :)

Sujet résolu !

Merci encore !