Afficher du texte en plus d'une image avec <a href>

**Jmimi** · 14/12/2023, 16h58

Bonjour à tous,

Voici mon code :

Code html :

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

1
2
3
<a href="Bisou.jpg">
    <img src="Bisou.jpg">
</a>

Est-il possible de façon simple d'ajouter du texte en dessous de l'image dans l'onglet qui s'ouvre ?

Par avance merci pour votre aide.

Cdt,
Jm

**unanonyme** · 14/12/2023, 17h39

Bonjour,

Dans l'absolu oui. A droite, a gauche, au dessus, en dessous.

Code :

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

1
2
3
4
5
6
Ici par exemple.
<a href="Bisou.jpg">
Ou là.
    <img src="Bisou.jpg">
</a>
Ou encore par ici.

Mais je doute que cela suffise à satisfaire à votre demande.

Il faudra appliquer une couche de style pour que la présentation
soit adéquat.

https://developer.mozilla.org/fr/doc...web/CSS_basics

Bonne journée.

**Dave Hiock** · 14/12/2023, 17h52

\ô/
unanonyme : je pense que tu n'as pas vu le «de l'image dans l'onglet qui s'ouvre ?».

Cela est jouable en créant un document, avec image et texte, que tu ouvres dans une fenêtre via un Window.open().

**unanonyme** · 14/12/2023, 20h04

@Dave Hiock

Bonjour,

En 2023 on peut proposer autre chose que cette horreur.

De toutes façons l'un dans l'autre c'est au PO d'étayer
sa question désormais.

Bonne journée.

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
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
<html>
 
<body>
	<a href="#img-id">
	  <img src="image-thumbnail.png" alt="Thumbnail">
	</a>
 
	<div class="overlay" id="img-id">
		<a href="#">
			<img src="https://placehold.co/600x400/EEE/31343C" alt="Fullscreen">
		</a>
		<br/>Text here
	</div>
 
	<style>
                .overlay {
                  position: fixed;
                  z-index: 99;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(0,0,0,0.9);
                  display: block;
                  align-items: center;
                  text-align: center;
                  visibility: hidden;
                  opacity: 0;
                  transition: opacity .3s;
                  color: white;
                }
 
                .overlay img{
                  max-width: 90%;
                  max-height: 90%;
                  width: auto;
                  height: auto;
                  transform: scale(0.95);
                  transition: transform .3s;
                }
 
                .overlay:target {
                  visibility: visible;
                  outline: none;
                  cursor: default;
                  opacity: 1;
                }
 
                .overlay:target img {
                    transform: scale(1);
                }
        </style>
 
</body>
 
</html>

**Dave Hiock** · 14/12/2023, 21h25

En 2023 on peut proposer autre chose que cette horreur.

en quoi est-ce une horreur, encore une de tes certitudes ! Je ne faisais que répondre à la question posée dans le contexte présenté.

Si on veut aller plus loin effectivement il existe d'autres façons de faire, mais est-ce le besoin, seul Jmimi pourra effectivement le dire.

Personnellement j'aurais proposé l'utilisation d'un élément <dialog> si c'est pour rester dans le même onglet.

**Jmimi** · 15/12/2023, 08h57

Bonjour,

Tout d'abord merci beaucoup, cela répond quasiment à ma demande.

Il y a encore 3 points que je n'arrive pas à solutionner :

- Peut-on supprimer complètement la petite image (qui reste affichée en petit à gauche, avec une opacité) ?

- Comment centrer verticalement l'ensemble (image + légende) sur l'écran ?

- Comment ouvrir l'image + sa légende dans une autre fenêtre (dans un nouvel onglet,... idéalement dans une autre session de l'explorer).

Cdt,
Jm

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
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
<html>
 
<body>
	<a href="#img-id">
	  <img src="Bisou.jpg" alt="Pas d'image" height="140" width="200">
	</a>
 
	<div class="overlay" id="img-id">
		<a href="#">
			<img src="Bisou.jpg" alt="Pas d'image">
		</a>
		<br/>Texte
	</div>
 
	<style>
                .overlay {
                  position: fixed;
                  z-index: 99;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(0,0,0,0.9);
                  display: block;
                  align-items: center;
                  text-align: center;
                  visibility: hidden;
                  opacity: 0;
                  transition: opacity .3s;
                  color: white;
                }
 
                .overlay img{
                  max-width: 97%;
                  max-height: 97%;
                  width: auto;
                  height: auto;
                  transform: scale(0.95);
                  transition: transform .3s;
                }
 
                .overlay:target {
                  visibility: visible;
                  outline: none;
                  cursor: default;
                  opacity: 1;
                }
 
                .overlay:target img {
                    transform: scale(1);
                }
        </style>
 
</body>
 
</html>

Afficher du texte en plus d'une image avec <a href>

HTML

Vue hybride

Discussions similaires

Partager

Partager