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

Version imprimable

14/12/2023, 16h58
Jmimi

Afficher du texte en plus d'une image avec <a href>
Bonjour à tous,

Voici mon code :
Code:

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
14/12/2023, 17h39
unanonyme
Bonjour,

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

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.
14/12/2023, 17h52
Dave Hiock

\ô/
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().

@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:

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>

14/12/2023, 21h25
Dave Hiock

Citation:

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.

Remerciements - Autres questions

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:

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>

Bonjour,

Pour aligner verticalement, une solution est de passer d'un "display: block;" vers un "display: grid;" pour bénéficier de la propriété "place-content".

Code:

1
2
3
4
5
6
                .overlay {
//...
			color: white;
			display: grid;
			place-content: center;
                }

En ce qui concerne l'opacité, le souci vient de la couleur de fond de l'élément caractérisé par le sélecteur ".overlay".
Définit par 4 valeurs, RGBA (red, green, blue, alpha).
Ici l'alpha vaut 0.9 dans "background: rgba(0,0,0,0.9); "
L'ajustement de cette valeur permettra de paramétrer cette opacité, à 1 c'est opaque, à 0 c'est transparent.
Vous ajusterez les autres valeurs pour définir une couleur appropriée.

Définissez ce que vous entendez par "session", il n'est pas certain que cela soit faisable.

Pour l'ouvrir dans une autre fenêtre, vous devrez en passer par window.open, et donc l'écriture de quelques lignes de javascript.

Je jette une base à adapter.

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
<html>
<body>
	<a href="#" id="img-id">
	  <img src="https://placehold.co/600x400/EEE/31343C" alt="Pas d'image" height="140" width="200">
	</a>
	<template id="picture-popup">
		<html>
		<body>
			<a href="#"><img ></a>
			<br/><span></span>
			<style>
                                body {
                                        background: rgba(0,0,0);
                                        display: grid;
                                        place-content: center;
                                        color: white;
                                        text-align: center;
                                        height: 100%;
                                        margin: 0;
                                }
                        </style>
		</body>
		</html>
	</template>
	<script>
                let wid = 0;
                const template = document.querySelector("#picture-popup");
                document.querySelector("#img-id").onclick = (ev)=>{
                        const tmpl_copy = template.content.cloneNode(true);
                        let img =ev.target;
                        if (img.nodeName!="IMG") {
                                img = img.querySelector("img");
                        }
                        tmpl_copy.querySelector("img").src = img.src;
                        tmpl_copy.querySelector("span").innerHTML = img.alt;
                        const w = window.open("", "w"+(++wid));
                        tmpl_copy.querySelector("img").onclick=w.close.bind(w);
                        w.document.body.appendChild(tmpl_copy);
                        return false;
                }
        </script>
</body>
</html>

Bonne journée.

Bonjour,

Une autre solution est simplement de créer une autre page html :

page1.html

Code:

1
2
3
4
5
<h1>Page 1</h1>
 
<a href="page2.html">
  <img src="image-mini.jpg" alt="Petite image">
</a>

page2.html

Code:

1
2
3
4
5
6
7
8
<h1>Page 2</h1>
 
<figure>
  <img src="image-full.jpg" alt="Grande image" />
  <figcaption>Description</figcaption>
</figure>
 
<a href="page1.html">Retour</a>

L'approche de Pytet est intéressante mais quid d'une multitude d'images à afficher.

En conservant l'idée d'un fichier externe et en passant en paramètre d'url les données à afficher on peut envisagée.

Les liens pourraient devenir de la forme
Code:

1 2 3 4 5 6 <figure> <a target="_blank" href="show-image.html?src=nom_grande_image.jpg&text=légende de l'image à afficher"> <img src="nom_petite_image.jpg" alt=""> </a> <figcation>Légende image<*figcaption> </figure>
et la page show-image.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <style> /* le style qui va bien */ </style> <body> <figure> <img src="" alt=""> <figcaption></figcaption> <figure> <script> const param = new URLSearchParams(location.search); document.querySelector("img").src = param.get("src"); document.querySelector("figcaption").textContent = param.get("text"); </script> </body>
On pourrait même envisager de passer par des liens temporaires en générant l'url au click sur l'image
Avec le html adapté en intégrant la notion de data-img
Code:

1 2 3 4 <figure> <img src="nom_petite_image.jpg" data-img="nom_grande_image.jpg" alt=""> <figcation>Légende image<*figcaption> </figure>
et un petit script de lancement
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function imageInNewPage(e) { const el = e.target; const lien = document.createElement("A"); lien.href = "show-image.html?src=" + el.dataset.img + "&text=" + el.nextElementSibling.textContent; lien.target = "_blank"; document.body.appendChild(lien); lien.click(); document.body.removeChild(lien); } document.querySelectorAll("[data-img]").forEach((el) => { el.addEventListener("click", imageInNewPage); });
Je pense que Jmimi n'a que l'embarras du choix.

20/12/2023, 09h06
Jmimi

Merci

Un grand merci, j'ai retenu la solution avec "show-image".