Faire disparaître une image avec un mouvement de la souris

**carjo** · 09/03/2020, 17h07

Bonjour,

Dans ma page html de galerie-photos, je souhaite faire disparaître une image lorsque la souris ou tout mouvement utilisateur touche à la galerie-photos. Cette page doit fonctionner sous IE:

Code HTML :

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
        <!-- TEST ima. déjà agrandie -->
	<div id="big_img_loaded" style= "display:none;">				
		<img 	src="../images/img_012.jpg" 
			style="	width: auto;
				height: auto;"						
			alt="	img_012" />
		<!-- texte accompagnant ima. -->						
		<span 	style="	right:0;top:0;
				margin-right:95px;
				margin-top: 89px;									
				width: auto;
				height: auto;				
				color:GrayText;
				font-size:0.7em;">
				Photo:&nbsp;Toto&nbsp;
		</span>
	</div>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
	<!-- TEST ima. déjà agrandie -->
	<script type="text/javascript">	
 
		let test = document.getElementById("galerie");
 
		document.getElementById("big_img_loaded").style.display = "block"; <!-- Cette ligne fonctionne bien, mais pas les suiv.: -->
		test.addEventListener("mouseenter", function(){
			document.getElementById("big_img_loaded").style.display = "none";
			});					
 
	</script>

L'image apparaît bien, mais ne disparaît pas lorsque la souris est sur la galerie. Que manque-t-il à ce bout de code ?

Merci.

**javatwister** · 09/03/2020, 17h39

Bonjour

Ici, ton code ne contient aucun id "galerie";

**carjo** · 09/03/2020, 19h51

Bonjour

Cela fonctionne en partie, cependant le mouseenter ne fonctionne que sur le parent (le fond) et non sur la galerie. La photo doit disparaître seulement lorsque l'utilisateur en choisit une autre dans la galerie. Idéalement, la page doit fonctionner avec IE. Voici la galerie et le css:

Code HTML :

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
		        <!--Galerie-->
			<div id="fond" >	
				<div id="galerie">			
					<ul>				
						<li>
							<a href="#"><img src="../images/img_012.jpg" alt="img_012"/>
							<span>Photo:&nbsp;Toto&nbsp;</span></a>					
						</li>
						<li>
							<a href="#"><img src="../images/img_013.jpg" alt="img_013"/>
							<span>Photo:&nbsp;Titi&nbsp;</span></a>
						</li>					
						<li>
							<a href="#"><img src="../images/img_014.jpg" alt="img_014"/>
							<span>Photo:&nbsp;Tata&nbsp;</span></a>
						</li>
						<!-- etc... -->
					</ul>
				</div>
			</div>

Voici le code css:

Code CSS :

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
#fond {
        width:100%;  
        height:610px; 
        margin-top:-15px;
        background-color:lightgray;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
 
 
#galerie ul {	
        list-style: none;
        width: 300px;
        height: 300px;
        padding-top:30px; /* hauteur de la ligne des thumbnails */
        left:30px;
}

**javatwister** · 10/03/2020, 07h39

D'un autre côté, si c'est un div et non une image qui déclenche l'event, tu as ce que tu demandes... (voir ton code)

**javatwister** · 10/03/2020, 10h37

test avec ton code: http://javatwist.imingo.net/galerietest.htm

Code html :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
<style>
#fond {
        width:100%;  
        height:auto; 
        margin-top:-15px;
        background-color:lightgray;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
 
 
#galerie ul {   
        list-style: none;
        width: 300px;
        height: auto;
        padding-top:30px; /* hauteur de la ligne des thumbnails */
        left:30px;
}
img{margin:15px 25px;vertical-align:middle}
</style>
 
</head>
<body>
<div id="fond" >	
	<div id="galerie">			
		<ul>				
			<li>
				<a href="#"><img src="sm01.gif" alt="img_1"/>
				<span>Photo:&nbsp;Tata&nbsp;</span></a>
			</li>					
			<li>
				<a href="#"><img src="sm02.gif" alt="img_2"/>
				<span>Photo:&nbsp;Tete&nbsp;</span></a>
			</li>					
			<li>
				<a href="#"><img src="sm03.gif" alt="img_3"/>
				<span>Photo:&nbsp;Titi&nbsp;</span></a>
			</li>					
			<li>
				<a href="#"><img src="sm04.gif" alt="img_4"/>
				<span>Photo:&nbsp;Toto&nbsp;</span></a>
			</li>					
			<li>
				<a href="#"><img src="sm05.gif" alt="img_5"/>
				<span>Photo:&nbsp;Tutu&nbsp;</span></a>
			</li>					
		</ul>
	</div>
</div>
 
<div id="cadre">
	<img src="sm46.gif" id="big_img_loaded" />
</div>   
 
<script>        
        const test = document.getElementById("galerie").querySelectorAll("img");
 
        for(let i=0;i<test.length;i++){
                test[i].addEventListener("mouseenter", function(){
                        document.getElementById("big_img_loaded").style.display = "none";
                });
                test[i].addEventListener("mouseout", function(){
                        document.getElementById("big_img_loaded").style.display = "block";
                })
        }
</script>
</body>
</html>

**carjo** · 10/03/2020, 19h50

En fait j'ai trouvé une solution qui fonctionne bien en plaçant une div à l'intérieur de ul, afin de délimiter exactement l'endroit voulu de déclenchement mouseover. (pas mouseeenter), i.e. n'importe quelle photo de la galerie.

Code html :

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

1
2
3
4
5
6
<div class="fond" >	
        <div id="galerie">
		<ul>
		       <div id="overPhotos">			
				<li>
                                       … etc.