[POO] Variable réinitialisée dans une classe

**dragonfly** · 29/11/2007, 14h11

OK OK,

donc comment je dois faire pour que ces valeurs soient bien pris en compte.
En clair ce que je veut c'est que lorsque ma souris passe sur un TD, une image apparait et se place au niveau du curseur de la souris.

Pour l'instant l'image s'affiche mais en haut a gauche de l'écran

**Djakisback** · 29/11/2007, 14h19

A priori, tu peux mettre un onmouseover dans ton td :

Code :

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

<td onmouseover="alert(souris.left)"></td>

tu remplaces le alert par ta fonction d'affichage d'image. D'ailleurs t'as pas besoin de passer souris en argument vu que c'est une variable globale. T'as fais une fonction pour afficher tes images ?

[edit]Je viens de revoir ton premier message mais il faudrait voir le JS. normalement tu peux faire ca sans créer de nouvelle image à chaque fois[/edit]

**dragonfly** · 29/11/2007, 14h24

Dans mon td j'ai ceci:

Code :

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

1
2
3
4
5
6
 
 
<td id="td276" 
onmouseout="var imag = new img("imgCarte"); imag.cache();" 
onmouseover="var imag = new img("imgCarte"); imag.posSouris(); imag.chgSource("../image/carte magic/276.jpg"); imag.affiche();" 
colspan="1">

avec ma classe image et objet qui sont :

Image (simplifiée)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
function img(id){
	objet.call(this,id);
 
	this.chgSource = function(source){
		document.getElementById(this.id).src=source;
	}
 
 
}

objet(simplifiée)

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
 
 
function objet(id){
	this.id=id;
 
	this.affiche = function(){
		document.getElementById(this.id).style.display="block";
	}
 
	this.cache = function(){
		document.getElementById(this.id).style.display="none";
	}
 
	this.chgPos = function(top,left){
		document.getElementById(this.id).top=top+"px";
		document.getElementById(this.id).left=left+"px";
	}
 
	this.posSouris = function(){
		var souri= new souris();
		this.chgPos(souri.topSouris(),souri.leftSouris());		
	}
}

Voila mes appels et mes class .js

Edit : je debute et si il est possible de ne pas créer un objet a chaque fois je suis preneur^^

**Djakisback** · 29/11/2007, 15h03

Pour les images personnellement je passerais par un tableau JS.
Sinon pour var souri= new souris();
faudrait le faire une seule fois aussi, dans le onload du body ou dans une balise script juste après la balise ouvrante body. Dans ta fonction posSouris tu y auras accès directement car ce sera une variable globale. Ensuite faut pas oublier de mettre la position des img que tu crées en absolute.

**dragonfly** · 29/11/2007, 16h28

Re,

1 des 2 conseils ont été résolu (enfin c'était déja comme ca).

Mon image est en position:absolute

Code :

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

1
2
3
4
5
6
 
img#imgCarte{
	z-index:10;
	position:absolute;top:0%;left:0%;
	display:none;	
}

Ensuite quand je met

Code :

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

1
2
 
 onLoad="var souri=new souris();"

dans le body et que je passe sur un TD il me dit que l'objet souri n'existe pas.

Peut être parce que mes td se trouvent dans un div appartenant a la page centrale (dans laquelle j'intégre le onLoad)

**Djakisback** · 29/11/2007, 17h42

Pour ton prob l'erreur doit être ici (ajout de 'style') :

Code :

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

1
2
document.getElementById(this.id).style.top=top+"px";
document.getElementById(this.id).style.left=left+"px";

En fait je pensais plutôt à une fonction init. Mais si tu mets le 'var' ca crée une variable locale et sans, elle sera globale. Le mieux serait de mettre ca dans le head, entre balise <script>. Ou alors <body onload="souri = new souris()">
Ensuite comme je le disais dans un post précédent, mettre ca dans le onmousemove :

Code :

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

1
2
this.left =  event.pageX || event.clientX + document.documentElement.scrollLeft;
		this.top =event.pageY || event.clientY + document.documentElement.scrollTop;

c'est mauvais a priori car à chaque fois que tu bouges la souris tu testes le navigateur (enfin les variables event.pageX, etc).

Un test comme ca :

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
function souris(){
	this.top = 0;
	this.left = 0;
	if(document.attachEvent) {
		document.attachEvent('onmousemove', function(e){
			this.left = event.x + document.body.scrollLeft;
			this.top = event.y + document.body.scrollTop;
		}.bind(this));
	}
	else if(document.addEventListener)	{
		document.addEventListener('mousemove', function(e){
			this.left = e.pageX;
			this.top = e.pageY;
		}.bind(this), false);
	}
 }

est plus propre car tu testes une fois pour toute (faudrait quand même tester sur Safari en tout cas marche IE,FF,Opéra)

Pour ce qui est du tableau d'images l'idée est de pouvoir créer une image seulement si elle existe pas. Avec un truc du style (j'ai regroupé obj avec img et renommé img en image pour éviter les conflits avec le DOM) :

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
<head>
<script>
 
Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
}
function souris(){
	this.top = 0;
	this.left = 0;
	if(document.attachEvent) {
		document.attachEvent('onmousemove', function(e){
			this.left = event.x + document.body.scrollLeft;
			this.top = event.y + document.body.scrollTop;
		}.bind(this));
	}
	else if(document.addEventListener)	{
		document.addEventListener('mousemove', function(e){
			this.left = e.pageX;
			this.top = e.pageY;
		}.bind(this), false);
	}
 }
 
function image(id)	{
	this.id=id;
 
	this.chgSource = function(source){
		document.getElementById(this.id).src=source;
	}
 
	this.affiche = function(){
		document.getElementById(this.id).style.display="block";
	}
 
	this.cache = function(){
		document.getElementById(this.id).style.display="none";
	}
 
	this.chgPos = function(top,left){
		document.getElementById(this.id).style.top=top+"px";
		document.getElementById(this.id).style.left=left+"px";
	}
 
	this.posSouris = function(){
		this.chgPos(souri.top,souri.left);
	}
}
 
function getImage(id)	{
	id = 'img' + id;
	if(!imgs[id])	{
		// Création de l'image DOM
		img = document.createElement('img');
		img.id = id;
		img.style.position = 'absolute';
		document.body.appendChild(img);   // etc J'imagine que t'as déjà fais une fonction pour tout ca
 
		imgs[id] = new image(id);
		imgs[id].chgSource("../image/carte magic/" + id +".jpg");
	}
	return imgs[id];
}
 
 
var souri = new souris();
var imgs = new Array;
 
</script>
</head>
<body>
<table><tr><td>rezerzerezrezrzer</td>
<td id="td276" 
onmouseout="getImage(this.id).cache();" 
onmouseover="getImage(this.id); getImage(this.id).posSouris(); getImage(this.id).affiche();" 
colspan="1">-----</td>
</tr></table>
</body>

Soluce plus propre, stocker l'objet DOM dans ta classe Object comme ca t'évites tous les document.getElementById().
Encore mieux mais je ne sais pas si compatible partout à l'heure actuelle, tu redéfinis tes méthodes directement dans l'objet DOM img via l'objet prototype.

Au final recréer l'image à chaque fois reste le plus simple et je pense pas qu'il y ait trop de différence de temps à l'exécution.

**dragonfly** · 30/11/2007, 16h15

Merci, je teste tout cela ce week-end et je reviens lundi

Bon week-end

**dragonfly** · 04/12/2007, 12h06

Re,

j'ai rajouté le xxx.style.xxx et le test que tu as mis mais cela ne fonctionne toujours pas.

Par contre j'ai essayé cela <body onload="souri = new souris()"> mais cela ne marche pas il me dit que l'objet souri n'existe pas.

Pour avoir un exemple de mon site, j'ai mis ma version sur ifrance, c'est un peu lent, c'est horrible (j'ai pas encore attaqué la partie graphique juste la technique) mais cela te permettra peut être de mieux cerner mon probléme)

Voici l'adresse http://testdragonfly.ifrance.com/

sur la premiére page, clique sur entrez et sur la gauche quand tu passe la souris sur le nom des cartes, une carte s'affiche en haut a gauche (faut attendre 5-10 sec c'est trés long => en même temps serveur gratuit donc)

EDIT : Sous IE je ne sais pas quel miracle mais ca n'affiche pas tout, et avec IE toolbar developer ca ne m'avance pas beaucoup plus... Si quelqu'un voit pourquoi eventuellement

[POO] Variable réinitialisée dans une classe

JavaScript

Discussions similaires

Partager

Partager