Affichage d'une image dans une zone fixe

Version imprimable

29/12/2020, 21h48
dessinateurttuyen

Affichage d'une image dans une zone fixe

Bonjour à tous,

Tout d'abord je tiens à préciser que je ne suis qu'un débutant sur HTML, CSS et JS.
Je voudrais créer une liste avec du texte dans un DIV, et qu'à droite de ce DIV, à une position fixe, une image s'affiche à chaque fois que la souris passe sur un élément de la liste, ou lorsqu'on clique dessus...

J'ai cherché sur le net avec juste du CSS mais il semble que cela ne soit pas possible. Du coup j'imagine qu'il faut passer par du JS mais le problème c'est que je ne trouve aucun tuto qui traite de ce cas précis.

Pourriez vous m'aider svp ?

Je vous remercie par avance.
30/12/2020, 10h21
NoSmoking

Bonjour,

Citation:

J'ai cherché sur le net avec juste du CSS mais il semble que cela ne soit pas possible.

il est possible de faire cela en pur CSS en utilisant les positionnements relatif/absolu, tout est une question de référent.

Montre nous le code HTML/CCS que tu utilises, je n'ai pas d'exemple sous la main.

J'ai trouvé ceci :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.popup {
        zoom:1.0;
        position:relative;
        text-decoration:none;
}
.popup span {
        position:fixed;
        top:10px;
        left:0px;
        left:-999em;
        
}
.popup:hover {visibility:visible}
.popup:hover span {left:100px;}
* html .popup span {position:absolute;}
</style>
</head>
 
<body>
 
<p><a class="popup" href="#">Lien 1<span><img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png"></span></a> </p>
 
<p><a class="popup" href="#">Lien 2<span><img src="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg"></span></a> </p>
 
</body>
</html>

mais le problème c'est que la position de l'image est fixe par rapport à l'écran. Or je voudrais les placer dans un endroit précis de la page, et que lorsque je scrolle la page, ça suit le déplacement.

Merci à toi en tous cas pour la réponse.

stratégie un peu différente mais plutôt classique, avec un peu de JS évidemment (charge la page pour voir):

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#liste{
        border:1px solid black;
        display:flex;
        justify-content :space-evenly;
        align-items:center;
}
#image {width:200px;
}
</style>
</head>
 
<body>
 
<div id="liste">
<ul>
<li><span data-im="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png">lien</span></li>
<li><span data-im="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg">lien</span></li>
<li><span data-im="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png">lien</span></li>
<li><span data-im="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg">lien</span></li>
<li><span data-im="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png">lien</span></li>
<li><span data-im="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg">lien</span></li>
<li><span data-im="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png">lien</span></li>
<li><span data-im="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg">lien</span></li>
<li><span data-im="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png">lien</span></li>
<li><span data-im="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg">lien</span></li>
<li><span data-im="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png">lien</span></li>
<li><span data-im="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg">lien</span></li>
<li><span data-im="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png">lien</span></li>
<li><span data-im="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg">lien</span></li>
<li><span data-im="https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png">lien</span></li>
<li><span data-im="http://www.iipix.com/wallpaper/pics/katasunsethor800.jpg">lien</span></li>
</ul>
<img id="image" alt="image" />
</div>
 
<script>
["mouseover","click"].forEach(v=>
        document.querySelector("#liste").addEventListener(v,e=> {
                if(e.target.nodeName=="SPAN"){
                        document.images["image"].src=e.target.dataset.im
                }
        })
);
</script>
</body>
</html>