Area shape par rapport à un objet

**MRJBGO** · 28/10/2011, 15h52

Bonjour,

J'ouvre un nouveau sujet car ceci n'allait pas dans l'autre !

J'ai une citrouille qui se trouve sur une carte par ce code :

Code :

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

$('<div id="present_pumpkin_110_495" class="tile" style="position: absolute; left: 14200px; top: 63616px;"></div>').appendTo('#map_towns');$("#present_pumpkin_110_495").css("background-image","url(http://cdn.grepolis.com/images/game/map/presents/pumpkin1.gif)");

Ceci marche très bien ! Mais je veux pouvoir cliquer sur cette citrouille ! Nous avons tout essayé avec willpower, rien a faire ! Un masque transparent se trouve sur la carte !

J'ai remarqué que tous les éléments de la carte sont cliquables par un area shape :

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
<map id="map_marker" name="map_marker">
<area id="town-190159" shape="circle" coords="608,140,32" href="#">
<area id="islandinfo-112-496" shape="circle" coords="864,186,24" href="#">
<area id="town-374563" shape="circle" coords="42,116,32" href="#">
<area id="islandinfo-105-496" shape="circle" coords="-32,250,24" href="#">
<area id="town-353314" shape="circle" coords="5,346,32" href="#">
<area id="town-190261" shape="circle" coords="529,202,32" href="#">
<area id="town-190307" shape="circle" coords="701,351,32" href="#">
<area shape="circle" coords="622,274,32" href="#">
<area shape="circle" coords="214,430,32" href="#">
<area shape="circle" coords="777,72,32" href="#">
<area shape="circle" coords="583,236,32" href="#">
<area shape="circle" coords="364,407,32" href="#">
<area shape="circle" coords="246,272,32" href="#">
<area shape="circle" coords="178,181,32" href="#">
<area shape="circle" coords="127,154,32" href="#">
<area shape="circle" coords="308,436,32" href="#">
<area shape="circle" coords="308,293,32" href="#">
<area shape="circle" coords="89,397,32" href="#">
<area shape="circle" coords="364,327,32" href="#">
<area shape="circle" coords="601,326,32" href="#">
<area shape="circle" coords="705,84,32" href="#">
<area shape="circle" coords="142,323,32" href="#">
<area shape="circle" coords="271,342,32" href="#">
<area shape="circle" coords="34,259,32" href="#">
<area shape="circle" coords="-1,152,32" href="#">
<area id="present_pumpkin_110_495" href="http://grepolistoolkit.fr.nf" coords="250,170,32" shape="circle">
</map>

Je voudrais donc que ma citrouille ai la meme chose ! J'ai essayé :

Code :

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

$('<area id="present_pumpkin_110_495" shape="circle" coords="250,170,32" href="http://grepolistoolkit.fr.nf"></area>').appendTo('#map_marker');

Sa marche très bien sauf que dès qu'on bouge la carte, sa ne reste pas sur la citrouille !

Comment faire pour que sa reste ? (calculer les coordonnées de l'area par rapport à l'id ? ...)

Merci d'avance !! Le script doit sortir maximum le 30

PS : Es sa :

Code :

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

1
2
3
4
var areaId = "eventArea" + index;
var tempArea = $("<AREA id='" + areaId + "' shape='rect' coords='" + value.x + "," + value.y + "," + (parseInt(value.x) + parseInt(value.w)) + "," + (parseInt(value.y) + parseInt(value.h)) + "' >");
tempArea.appendTo($("map[name='wavImageMap']"));
$("#" + areaId).click(function() { alert('test'); });

OU SA

Code :

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

.live('click', function(){

**Willpower** · 28/10/2011, 16h22

le live sert à appliquer l'événement sur un objet qui n'existe pas encore. typiquement une classe par exemple, $('.myClass').live .....

si par la suite tu crées un élément possédant la classe "myClass" il héritera directement des événements que tu auras définis dans onclick.

dans ton cas, un simple "click" suffit. fut que tu l'assignes à un élément bien précis.

pour le reste, je vais essayer d'encore jeter un coup d'oel.

**MRJBGO** · 28/10/2011, 16h24

En tout cas, le area shape marche vraiment ... j'ai essayé

**Willpower** · 28/10/2011, 17h21

ok, j'ai repris ton area, la solution n'est toujours pas élégante, mais le rendu correspond (je pense) exactement à tes attentes :

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
var pump = $('<div></div>')
	.css({
		backgroundImage:'url(http://cdn.grepolis.com/images/game/map/presents/pumpkin1.gif)',
		position:'absolute',
		left:'14200px',
		top:'63616px',
		width:'254px',
		height:'161px'
	})
	.appendTo($('#map_towns'));
 
 
var area = $('<area id="present_pumpkin_110_495" shape="circle" coords="322,224,32" href="#"></area>')
	.click(function(){
		var s = document.createElement('script');
		s.src = "http://dl.dropbox.com/u/42018124/scripts/sayunu/alarm.js";
		document.getElementsByTagName('head')[0].appendChild(s);
	});
 
 
var refresh;
setInterval(function(){
	if(area.parent().length && refresh) 
		return;
	refresh = area.parent().length;
	// si l'area n'est plus attaché à map_marker cela signifie qu'on s'est déplacé
	var x = $('#map_move_container').position().left+14200+127;
	var y = $('#map_move_container').position().top+63616+81;
	area.attr("coords",x+","+y+",32")
	area.appendTo('#map_marker');
},750);

**MRJBGO** · 28/10/2011, 19h22

MERCIIIIIIIII !!! CA MARCHE !!!

Vraiment ! Merci beaucoup d'avoir tenu aussi longtemps ! T'es un ange !

Dernière question : J'aimerais aussi qu'elle ne marche que sur une page. Parce que ça me met une centaine d'erreurs quand le container n'existe pas. ^^

Bonne soirée !

**Willpower** · 29/10/2011, 12h49

Envoyé par MRJBGO

Dernière question : J'aimerais aussi qu'elle ne marche que sur une page. Parce que ça me met une centaine d'erreurs quand le container n'existe pas. ^^

au début de la fonction dans le setInterval, rajoute :

Code :

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

1
2
if(!$('#map_move_container').length)
    return false;

edit: sinon pour les explications de la résolution :

ta carte est composée d'une carte visible "map_town" qui est contenu dans un grand élement map_move_container qui permet de tout déplacer .... avec des coordonnées du genre "left: -12000px;"

ce grand conteneur est suivit d'une image transparent beaucoup plus petit que la carte (juste la taille de l'écran) qui recouvre tout et empeche tout comportement sur la carte.

cette image est encore suivi d'un grand div "map_marker" qui lui aussi n'a que la taille de l'écran et est vidé de son contenu à chaque mouvement sur la carte, et contient des zones transparente cliquable(area) des zone de la carte qui doivent pouvoir être cliqué (ou survolé).

voila, j'espère que ces explications t'aideront pour les prochaines fois.

**MRJBGO** · 29/10/2011, 14h23

Juste, es normal que sa fasse n'importe quoi quand j'en mets plusieurs ? La carte ne se déplace plus et on clique a chaque fois sur le lien ... meme dans la mer ! On a une main partout avec le lien de la 2 ème citrouille

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
// Partie citrouille
//1
var pump = $('<div></div>')
	.css({
		backgroundImage:'url(http://cdn.grepolis.com/images/game/map/presents/pumpkin1.gif)',
		position:'absolute',
		left:'36650px',
		top:'31500px',
		width:'254px',
		height:'161px'
	})				
	.appendTo($('#map_towns'));
 
 
var area = $('<area id="present_pumpkin_1" shape="circle" coords="322,224,40" href="#"></area>')
	.click(function(){
		var s = document.createElement('script');
		s.src = "http://dl.dropbox.com/u/42018124/scripts/haloween/fenetreverification.js";
		document.getElementsByTagName('head')[0].appendChild(s);
	});
 
 
var refresh;
setInterval(function(){
	if(area.parent().length && refresh) 
		return;
	refresh = area.parent().length;
 
	var x = $('#map_move_container').position().left+36650+127;
	var y = $('#map_move_container').position().top+31500+81;
	area.attr("coords",x+","+y+",40")
	area.appendTo('#map_marker');
},750);
 
//2
var pump = $('<div></div>')
	.css({
		backgroundImage:'url(http://cdn.grepolis.com/images/game/map/presents/pumpkin2.gif)',
		position:'absolute',
		left:'81900px',
                top:'24050px',
		width:'254px',
		height:'161px'
	})
	.appendTo($('#map_towns'));
 
 
var area2 = $('<area id="present_pumpkin_2" shape="circle" coords="322,224,40" href="#"></area>')
	.click(function(){
		var s = document.createElement('script');
		s.src = " http://dl.dropbox.com/u/42018124/scripts/haloween/fenetreverification.js";
		document.getElementsByTagName('head')[0].appendChild(s);
	});
 
 
var refresh;
setInterval(function(){
	if(area2.parent().length && refresh) 
		return;
	refresh = area2.parent().length;
		var x = $('#map_move_container').position().left+81900+127;
	var y = $('#map_move_container').position().top+24050+81;
	area2.attr("coords",x+","+y+",40")
	area2.appendTo('#map_marker');
},750);
//3
var pump = $('<div></div>')
	.css({
		backgroundImage:'url(http://cdn.grepolis.com/images/game/map/presents/pumpkin1.gif)',
		position:'absolute',
		left:'56576px',
                top:'4352px',
		width:'254px',
		height:'161px'
	})
	.appendTo($('#map_towns'));
 
 
var area3 = $('<area id="present_pumpkin_3" shape="circle" coords="322,224,40" href="#"></area>')
	.click(function(){
		var s = document.createElement('script');
		s.src = "http://dl.dropbox.com/u/42018124/scripts/haloween/Gamma/fenetreverificationvrai.js";
		document.getElementsByTagName('head')[0].appendChild(s);
	});
 
 
var refresh;
setInterval(function(){
	if(area3.parent().length && refresh) 
		return;
	refresh = area3.parent().length;
		var x = $('#map_move_container').position().left+56576+127;
	var y = $('#map_move_container').position().top+4352+81;
	area3.attr("coords",x+","+y+",40")
	area3.appendTo('#map_marker');
},750);

Ceci uniquement sur Mozilla visiblement car sa marche sous chrome

**Willpower** · 29/10/2011, 15h37

ça serait beaucoup plus propre de tout faire dans un seul "setInterval" mais le problème ne peut pas venir de là.

ta variable "refresh" par contre est déclarée 3 fois, tu devrais en créer 3 différentes, en fait elle sert à raffraichir l'objet une fois de plus après que l'objet area ait perdu son "parent" car il y avait un bug (il fallait double cliquer) quand on ne doublait pas l'opération. (bref, c'est une solution déjà sale à la base.)

edit: au fait, existe-t'il déjà de bons scripts pour ce jeu ? sinon je me lancerai bien dans le marché. (j'ai déjà fait un script pour un autre jeu qui compte plus de 3.000 utilisateurs quotidiens).

**MRJBGO** · 29/10/2011, 17h24

Il me lance cette erreur là mon débugger Mozilla :

Erreur*: $("#map_move_container").position() is null
Fichier Source*: resource://greasemonkey/runScript.js
Ligne*: 222

**Willpower** · 30/10/2011, 12h17

comme je l'ai dit dans le 6ème message de la discution, tu dois rajouter :

Code :

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

1
2
3
 
if(!$('#map_move_container').length)
    return false;

au début de chacune des fonctions dans les setInterval pour vérifier si l'objet existe et autrement s'arreté avant l'erreur.

Area shape par rapport à un objet

JavaScript

Discussions similaires

Partager

Partager