Ouvrir une fenêtre en surimpression

Version imprimable

02/02/2021, 19h59
enicnath

Ouvrir une fenêtre en surimpression

Bonjour,

Je souhaiterais créer une page HTML dans laquelle un lien ouvre une fenêtre en surimpression de la page sur laquelle on est.

Voici un exemple dans wikipedia : https://fr.wikipedia.org/wiki/Wikip%...ueil_principal
Vers le haut de la page, à droite, il y a un cadre avec le texte suivant :

Citation:

Présentation
Wikipédia est un projet d’encyclopédie collective en ligne, universelle, multilingue et fonctionnant sur le principe du wiki. Ce projet vise ...

Lorsqu'on se balade sur le mot Wikipedia, que j'ai coloré en bleu ci-dessus, on voit que s'ouvre un cadre avec du texte et une image (le globe terrestre façon puzzle).
Ce cadre est "en surimpression" de la page d'accueil de Wikipedia.

Quelqu'un sait-il si ce genre de chose est faisable en HTML et comment ?
Et cerise sur le gâteau, est-il possible de rendre sélectionnable le texte à l'intérieur de ce cadre ?

Merci
02/02/2021, 20h58
ProgElecT

Salut

Peut être dans cette discussion, il y a 2 codes proposés déclenchement sur une image, mais sur un mot entre balises <span>le mot</spans> il n'y a pas trop de boulot pour adapter.
04/02/2021, 19h12
enicnath

Citation:

Envoyé par ProgElecT

Peut être dans cette discussion, il y a 2 codes proposés déclenchement sur une image ...

Effectivement, ça ressemble à ce que je voudrais faire. Je vais essayer de bûcher ça. Merci !

En revanche je ne comprends pas bien ce que vous voulez dire (je suis débutant) dans :

Citation:

... mais sur un mot entre balises <span>le mot</spans>

Salut

Un petit exemple

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
73
74
<!DOCTYPE html>
<html lang="fr"> <!--pseudoboitetitle2.html -->
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<title>Démo boite tilte</title>
		<style>
/* ................... pour faire fonctionner la première ligne ....................... */
                        .infCaher{
                                color:white; /* couleur du fond */
                        }
                        span.infAfficher:hover {
                                color: #ff0000; /* autre couleur que le fond */
                        } 
/* ....................  pour faire fonctionner la deuxième ligne ...................... */
                        .barre {text-decoration:line-through;
                        }
                        .ColorNormale{
                                color:black;
                                /* le reste n'est qu'esthétique */
                                font-size:1.2em;
                                font-weight: bold;
                        }
                        span.Declencheur:hover{ /* non obligatoire */
                                color:blue;
                        } 
                        span.Declencheur:hover + div{
                                display:block;
                        } 
                        div.DivInfos:hover{
                                display:block;
                                height: 145px;
                                width: 250px;
                        } 
                        .DivInfos{
                                position:absolute;
                                display:none;
                                height:20px;
                                width:200px;
                                /* .............. le reste n'est qu'esthétique ............... */
                                overflow: hidden;
                                background-color:PaleGoldenRod;
                                border: 1px solid green;
                                border-radius: 8px;
                                box-shadow: 10px 10px 5px grey;
                                text-align:center;
                                transform: translate(40%, -2%);
                                transition: width 0.5s, height 0.5s;
                                /* ........................................................... */
                        }
 
                </style>
	</head>
	<body>
		Allez tout au bout de la ligne pour voir ce qui se passe,<span class="infCaher infAfficher"> à que coucou</span>
		<br />
		En passant <span class="barre">par la lorraine</span> sur ce<span class="ColorNormale Declencheur"> mot</span>, un panneau avec liens vous verrez, glissez le pointeur dessus pour l'agrandir.
		<div class="DivInfos">
			Quelques liens pour la démo
			<br />
			<a href="https://www.developpez.net/forums/d2102150/webmasters-developpement-web/balisage-x-html-validation-w3c/ouvrir-fenetre-surimpression/#post11681107" target="_blank">Ta discussion</a><br />
			<a href="https://css.developpez.com/cours/" target="_blank">Apprendre le CSS</a><br />
			<a href="https://www.developpez.net/forums/f80/club-professionnels-informatique/evolutions-club/" target="_blank">Evolutions du club</a><br />
			plus modestement
			<a href="https://contrib-vb.developpez.com/ProgElecT/" target="_blank">Ma page perso</a><br />
			<br />
			<img src="https://contrib-vb.developpez.com/ProgElecT/Images pour discussions/LogoOr.gif">
		</div>
		<br />
		Du texte pour remplir un peu,<br />
		en tous cas avoir plusieurs lignes.<br />
		Cette démo n'est qu'un exemple basic,<br />
		il y a beaucoup mieux, mais le principe est là.
	</body>
</html>

06/02/2021, 16h50
enicnath

Wouah, impressionnant !

Je vais essayé de comprendre et utiliser ...

Merci encore
12/02/2021, 09h47
enicnath

Nouvelle question sur le même sujet :

Le code précédent supposait que l'utilisateur balade simplement le curseur sur le mot, pour faire apparaître la fenêtre en surimpression.

Maintenant, je voudrais obtenir le même résultat, non pas en promenant le curseur sur le mot, mais en cliquant sur ce mot.
Est-il nécessaire alors d'avoir un code javascript ?