Comment modifier l'attribut onmouseover une fois la page chargée ?

Version imprimable

11/01/2009, 18h16
Kyn

Comment modifier l'attribut onmouseover une fois la page chargée ?

Bonjour,

Pour faire simple, voici ce que je veux faire:

1) En haut de la page: 5 miniatures photos (genre pellicule)
2) De part et d'autre de cette pellicule: une fonction avancer, une fonction reculer
3) En dessous de cette pellicule, une image agrandie d'une des miniatures
4) Lorsque l'on passe sur les miniatures, cela doit modifier la source de l'image agrandie (simple onmouseover)

Pour le moment, j'ai réussi toutes ces étapes. Tout est fait en PHP/Javascript. Le seul problème, c'est qu'une fois que je fais suivant ou précédent puis que je souhaite afficher une des miniatures en grand, ma fonction "onmouseover" a conservé le mauvais paramètre (celui donné au chargement de la page).

Mon problème est donc: comment modifier l'attribut "onmouseover" d'une balise a posteriori ?

J'ai bien essayé un document.getElementById().onmouseover=blabla(); pour modifier ce champ mais le problème c'est que quand je click sur avancer (ou reculer) pour faire appel à ma fonction qui modifie le onmouseover, cela n'a pas l'effet escompté...

Comment feriez-vous ?
12/01/2009, 10h07
le_chomeur

un morceau de code a nous montrer ?

tu en rafraichirais pas ta page par hasard ?
12/01/2009, 10h08
franculo_caoulene

Salut,

Tu ne voudrais pas poster ton code par hasard?

Oui, bien sûr ;-) Dans mes fonctions processNext() et processPrev(), vous verrez une ligne (identique) commentée, c'est cela qui ne fonctionne pas...

Je pensais modifier mon code pour insérer des <div> devant chaque balise <img> et faire appel à Javascript pour modifier le code à l'intérieur des balises <div> par un coup de document.getElementById().innerHTML = "...";

N'hésitez pas à critiquer...

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
 
<body>
<script type="text/javascript">		
	function changeImgOver(idsrc,imgdst){
		document.getElementById(idsrc).src="./img/600x600_"+imgdst;
	}
	var t_Img = new Array();
 
	t_Img[0] = "DSC_0495.JPG";
	t_Img[1] = "DSC_0496.JPG";
	t_Img[2] = "DSC_0497.JPG";
	t_Img[3] = "DSC_0499.JPG";
	t_Img[4] = "DSC_0501.JPG";
 
	function processPrev(){
		var t_ImgTmp = new Array();
		var i = 0;
		var j = 0;
 
		while(i<t_Img.length){		
			j = (4 + i)%5;
			t_ImgTmp[i] = t_Img[j];
			document.getElementById("vign"+i).src="./thumbs/"+t_ImgTmp[i];
			//document.getElementById("vign"+i).onmouseover="changeImgOver('zoomhere',"+t_ImgTmp[i]+")";
			i++;
		}
 
		i=0;
		while(i<t_Img.length){
			t_Img[i] = t_ImgTmp[i];
			i++;
		}				
	}
 
	function processNext(){
		var t_ImgTmp = new Array();
		var i = 0;
		var j = 0;
 
		while(i<t_Img.length){		
			j = (1 + i)%5;
			t_ImgTmp[i] = t_Img[j];
			document.getElementById("vign"+i).src="./thumbs/"+t_ImgTmp[i];
			//document.getElementById("vign"+i).onmouseover="changeImgOver('zoomhere',"+t_ImgTmp[i]+")";
			i++;
		}
 
		i=0;
		while(i<t_Img.length){
			t_Img[i] = t_ImgTmp[i];
			i++;
		}				
	}
 
 
</script>
 
(...)
	<div id="core">
		<div id="pellicule">
			<ul id="vignettes">
				<li id="nav"><a id="prevLink" href="#" onclick="processPrev()"><<<&nbsp;</a>
				<li id="vignette"><img id="vign0" src="./thumbs/DSC_0495.JPG" onmouseover="changeImgOver('zoomhere','DSC_0495.JPG');"/>
				<li id="vignette"><img id="vign1" src="./thumbs/DSC_0496.JPG" onmouseover="changeImgOver('zoomhere','DSC_0496.JPG');"/>
				<li id="vignette"><img id="vign2" src="./thumbs/DSC_0497.JPG" onmouseover="changeImgOver('zoomhere','DSC_0497.JPG');"/>
				<li id="vignette"><img id="vign3" src="./thumbs/DSC_0499.JPG" onmouseover="changeImgOver('zoomhere','DSC_0499.JPG');"/>
				<li id="vignette"><img id="vign4" src="./thumbs/DSC_0501.JPG" onmouseover="changeImgOver('zoomhere','DSC_0501.JPG');"/>
				<li id="nav"><a id="#" href="#" onclick="processNext();">&nbsp;>>></a>
			</ul>
		</div>
		<div id="zoomzoom">
			<img id="zoomhere" src="./img/600x600_DSC_0495.JPG"/>
		</div>
	</div>
 
(...)
 
</body>

Question au passage: est-il possible de passer un tableau PHP à Javascript ou ne peut-on passer que le contenu ?

12/01/2009, 11h46
le_chomeur

essaye :

Code:

document.getElementById("vign"+i).onmouseover= function(){changeImgOver('zoomhere',t_ImgTmp[i])};

pour passer un tableau php a javascript tu peux le faire sous forme json , ou alors écrire en dur le code dans ta page html ... tout dépend de la façon dont tu récupères tes données
12/01/2009, 13h19
Kyn

Merki pour la piste ! Le code ci-dessous a fonctionné pour moi.

A ton avis, cela revient au même ou il y a une subtilité (genre consommation mémoire ou autre) ?

Code:

document.getElementById("vign"+i).onmouseover = new Function('changeImgOver("zoomhere","'+t_Img[i]+'");');
12/01/2009, 13h39
franculo_caoulene

Tu peux lire ceci peut-être que ça t'aidera à comprendre.
12/01/2009, 13h55
Kyn

Pas vraiment :-) Ton code est assez complexe
12/01/2009, 13h56
le_chomeur

le code de franculo est juste un gestionnaire d'évènement :)
12/01/2009, 14h54
franculo_caoulene

Oui bon...

Sans le new on invoque la fonction dans le contexte de la page chargée (à son origine).
Avec le new on invoque la fonction dans un contexte à instant T de la page, donc avec des variables éventuellement modifiées prises en compte.
12/01/2009, 15h01
SpaceFrog

se méfier de l'attribution du i ...

perso je serais passé par un attribut intermédiaire ...
12/01/2009, 16h27
Kyn

@franculo_caoulene: merci :-) j'suis pas encore trop familier sur le code OO de JS.

@SpaceFrog: pourquoi cela ? tu penses que je peux aller plus loin que la longueur du tableau, c'est bien ça ?
12/01/2009, 16h55
SpaceFrog

Non je pense que tous tes i seront egal au dernier de la boucle ...