11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JS Non Intrusif avec onmouseover

Bonjour à vous !

J'ai des images sur lesquelles j'ai mis un attribut onmouseover, seulement je voudrai ne plus avoir cet attribut et gérer cela à partir de mon fichier javascript externe.

Voici le code xhtml des images :


<body>
	<div id="left">
		<div class="divLeftSideBloc">
			<div class="divLeftSideBlocTitle">Zoom</div>
			<div class="divLeftSideBlocFrame" id="blocZoom"><br />
				<a href="(...)" title="Zoom arri&egrave;re"><img src="images/btn_minus.gif" alt="Zoom arri&egrave;re" name="zoom_minus" /></a><br />
				<a href="(...)" title="Zoom niveau 2"><img src="images/btn_zoom02_up.gif" alt="Zoom niveau 2" name="zoom2" id="zoom2" /></a><br />
				<a href="(...)" title="Zoom niveau 3"><img src="images/btn_zoom03_up.gif" alt="Zoom niveau 3" name="zoom3" id="zoom3" /></a><br />
				<a href="(...)" title="Zoom niveau 4"><img src="images/btn_zoom04_up.gif" alt="Zoom niveau 4" name="zoom4" id="zoom4" /></a>
			</div>
		</div>
	</div>
</body>


Et voici mon code JS qui ne fonctionne malheureusement pas...


window.onload = function test() {
	var imageZoom = document.getElementById('blocZoom').getElementsByTagName('img');
	
	for(var p = 2; p < imageZoom.length; p++) {
		imageZoom[p].onmouseover = function() {
			alert(p);
		}

		imageZoom[p].onmouseout = function() {
			// Pas encore fait
		}
	}
}


Ce que je souhaite, c'est lorsque je me place, par exemple, sur l'image id="zoom3", qu'il m'affiche une alerte avec le chiffre 3.

Merci d'avance pour vos conseils.
Modifié par Alphonse (30 Nov 2007 - 14:01)
Modérateur
Salut, Smiley smile

Ton code fonctionne bien mais pour récupérer le numéro de clé, il faut le mémoriser. Comme ceci par exemple :
window.onload = function test() {
	var imageZoom = document.getElementById('blocZoom').getElementsByTagName('img');
	for(var p = 2; p < imageZoom.length; p++) {
		imageZoom[p].num = p;
		imageZoom[p].onmouseover = function() {
			alert(this.num);
		}
	}
}
PS : Tu obtiendras un 2 au lieu de 3 car le premier numéro de clé d'un tableau est 0 et non 1.
Modifié par koala64 (30 Nov 2007 - 13:51)
Modérateur
De rien et pas de honte à avoir; ça arrive à tout le monde. Smiley cligne

PS : N'oublies pas d'ajouter la mention [résolu] à ton titre... Merci d'avance. Smiley smile
Le code "final" :

window.onload = function test() {
	var imageZoom = document.getElementById('blocZoom').getElementsByTagName('img');

	for(var p = 1; p < imageZoom.length; p++) {
		imageZoom[p].num = p + 1;
		imageZoom[p].onmouseover = function() {
			alert(this.num);
		}
	}
}
Dans la foulée, on pourrait faire de la conversion de code HTML bourrin à code HTML structuré. Smiley cligne 
<body>
	<div id="left">
		<div class="divLeftSideBloc">
			<hN>Zoom</hN> <!-- niveau de titre à déterminer selon structure de la page -->
			<ul class="divLeftSideBlocFrame" id="blocZoom">
				<li><a href="(...)" title="Zoom arri&egrave;re"><img src="images/btn_minus.gif" alt="Zoom arri&egrave;re" name="zoom_minus" /></a></li>
				<li><a href="(...)" title="Zoom niveau 2"><img src="images/btn_zoom02_up.gif" alt="Zoom niveau 2" name="zoom2" id="zoom2" /></a></li>
				<li><a href="(...)" title="Zoom niveau 3"><img src="images/btn_zoom03_up.gif" alt="Zoom niveau 3" name="zoom3" id="zoom3" /></a></li>
				<li><a href="(...)" title="Zoom niveau 4"><img src="images/btn_zoom04_up.gif" alt="Zoom niveau 4" name="zoom4" id="zoom4" /></a></li>
			</ul>
		</div><!-- #divLeftSideBloc -->
	</div><!-- #left -->
</body>

Et si ces liens ne sont pas de vrais liens hypertexte, mais uniquement des supports pour la fonction JS de zoom, peut-être faudrait-il les générer en Javascript également (en fait générer toute la div, le hN et le ul).
Alphonse a écrit :
Le code "final" :

window.onload = function test() {
	var imageZoom = document.getElementById('blocZoom').getElementsByTagName('img');

	for(var p = 1; p < imageZoom.length; p++) {
		imageZoom[p].num = p + 1;
		imageZoom[p].onmouseover = function() {
			alert(this.num);
		}
	}
}

Salut,

Quel est l'intérêt d'embarquer une propriété qui a une valeur relative constante (n[x].p = x+1)?

Attacher des propriétés sur les élements html peut poser des problèmes de fuite de mémorie (notamment sous IE)
Florent V.> En effet, mais je n'arrive pas à avoir mes images, qui se trouvent les unes en-dessous des autres, collées l'un contre l'autre... Il y a un espace blanc qui me gêne...

Avec espace, ce que j'obtiens :
upload/14342-01.png

Sans espace, ce que je devrais obtenir :
upload/14342-02.png

Shinuza> Entre temps, n[x].p = x+1 est devenu n[x].p = x

Par contre, je n'ai jamais entendu parler des problèmes de fuite de mémoire... je vais me renseigner sur l'Internet là-dessous.
Alphonse a écrit :
Florent V.> En effet, mais je n'arrive pas à avoir mes images, qui se trouvent les unes en-dessous des autres, collées l'un contre l'autre... Il y a un espace blanc qui me gêne...

Est-ce que ça ne serait pas couvert par l'item de la FAQ qui parle d'espaces indésirables sous les images?
En effet, j'étais tombé sur un de tes articles qui parlait des espaces entre les images se trouvant sur une même ligne et du coup, je n'ai pas cherché ailleurs... Merci beaucoup !
Sujet clos
Aller à