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>

**unanonyme** · 15/12/2023, 10h54

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

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

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 :

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
<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.

**Pytet** · 15/12/2023, 12h48

Bonjour,

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

page1.html

Code :

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

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 :

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

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>

**Dave Hiock** · 16/12/2023, 10h32

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

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

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 :

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

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

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

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

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

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.

**Jmimi** · 20/12/2023, 09h06

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

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

HTML

Discussions similaires

Partager

Partager