addEventListner et mouseover sur image

**zeclubbeur** · 28/12/2011, 22h00

Bonsoir.

Voilà mon souci.
Je souhaite réaliser un petit diaporama défilant.
J'utilise donc un bout de code php pour lire le dossier où sont stockées les images puis un bout de code php pour générer les miniatures dynamiquement et les stocker sur le serveur.
La partie affichage des images et le défilement fonctionnent bien.

Donc, j'ai en suite souhaité que lorsque l'on survole l'image, celle-ci s'affiche en plus grand en aperçu. Rien de plus simple me direz vous... Certes. Mais sans utiliser le onMouseOver/onMouseOut sur ma balise img (ce qui n'est pas le cas actuellement, bricolage oblige).

Voici la structure de mon HTML :

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
<body onload="AutoScroll()">
    <div id="Debug"></div>
        <div id="VisualiseurPhoto"></div>
        <div id="C_Site">
            <div id="C_Zone_Scroll">
       	        <div id="C_images">
	            <img src="/modules/communs/img.php?d_image=<?php echo $dossier_photos_medium; ?>&image=<?php echo $fichier; ?>" 
                         onmouseout="Mask_Apercu_Img(this.alt)" 
                         onmouseover="Apercu_Img(this.alt);" />
                </div>
	    </div>
	</div>
        <div id="Apercu_Imgage"></div>
    </div>
</body>

Donc, je vous explique :
Dans la partie javascript, j'utilise le gestionnaire d'événement en attachant des événements sur la div "C_images".

Code :

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

1
2
var C_Img = document.getElementById('C_images');
C_Img.addEventListener("mouseover",StopScroll,false);

Mon problème, c'est que je souhaiterais que l'événement "onscroll" soit capturé seulement sur les images, et non pas sur l'ensemble du div "C_image".

Pourriez-vous m'aider ?
Merci d'avance.

**zeclubbeur** · 29/12/2011, 14h33

Bon, finalement, j'ai trouvé la solution.

j'utilise getElementByTagName pour déterminer le nombre d'images sur l'élément "C_images".

De là, je fais un while et assigne un addEventListner sur chaque image, en ayant au préalable assigné un ID différent sur chacune d'elle via php.

C'était simple, en fin de compte