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

**Kyn** · 11/01/2009, 18h16

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 ?

**le_chomeur** · 12/01/2009, 10h07

un morceau de code a nous montrer ?

tu en rafraichirais pas ta page par hasard ?

**franculo_caoulene** · 12/01/2009, 10h08

Salut,

Tu ne voudrais pas poster ton code par hasard?

**Kyn** · 12/01/2009, 11h17

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 :

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

**le_chomeur** · 12/01/2009, 11h46

essaye :

Code :

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

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

**Kyn** · 12/01/2009, 13h19

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 :

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

document.getElementById("vign"+i).onmouseover = new Function('changeImgOver("zoomhere","'+t_Img[i]+'");');

**franculo_caoulene** · 12/01/2009, 13h39

Tu peux lire ceci peut-être que ça t'aidera à comprendre.

**Kyn** · 12/01/2009, 13h55

Pas vraiment :-) Ton code est assez complexe

**le_chomeur** · 12/01/2009, 13h56

le code de franculo est juste un gestionnaire d'évènement

**franculo_caoulene** · 12/01/2009, 14h54

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.

**SpaceFrog** · 12/01/2009, 15h01

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

perso je serais passé par un attribut intermédiaire ...

**Kyn** · 12/01/2009, 16h27

@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 ?

**SpaceFrog** · 12/01/2009, 16h55

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

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

JavaScript

Discussions similaires

Partager

Partager