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.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager