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

Version imprimable

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:

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:

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.

09/03/2020, 17h39
javatwister

Bonjour

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

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:

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:

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;
}

10/03/2020, 07h39
javatwister

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)

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

Code:

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>

10/03/2020, 19h50
carjo
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:

1 2 3 4 5 6 <div class="fond" > <div id="galerie"> <ul> <div id="overPhotos"> <li> … etc.
Je devrai optimiser le code, mais merci pour votre aide.
10/03/2020, 22h38
javatwister

restons calme...
11/03/2020, 01h59
carjo

Citation:

restons calme...

dsl, je ne comprends pas votre intervention. Lorsque je dis que je veux optimiser, ça s'applique à mon propre code et non au vôtre.

Cordialement,