Area shape par rapport à un objet [Résolu]

[MRJBGO]

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 :

$('<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 :

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 :

$('<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 :

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 :

.live('click', function(){

[Willpower]

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]

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

[Willpower]

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

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

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]

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 :

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]

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 :

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]

ç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]

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]

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

Code :

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.