IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

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


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Homme Profil pro
    Amateur autodidacte
    Inscrit en
    Juin 2013
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Amateur autodidacte

    Informations forums :
    Inscription : Juin 2013
    Messages : 6
    Par défaut Afficher du texte en plus d'une image avec <a href>
    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

  2. #2
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    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.

  3. #3
    Membre expérimenté
    Homme Profil pro
    OoW
    Inscrit en
    Juin 2019
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : Juin 2019
    Messages : 146
    Par défaut
    \ô/
    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().

  4. #4
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    @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>

  5. #5
    Membre expérimenté
    Homme Profil pro
    OoW
    Inscrit en
    Juin 2019
    Messages
    146
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : Juin 2019
    Messages : 146
    Par défaut
    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.

  6. #6
    Membre du Club
    Homme Profil pro
    Amateur autodidacte
    Inscrit en
    Juin 2013
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Amateur autodidacte

    Informations forums :
    Inscription : Juin 2013
    Messages : 6
    Par défaut 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 : 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>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. afficher un texte à partir d'une liste d'image
    Par soledad_001 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 03/03/2014, 20h51
  2. [XSL-FO] [FOP] afficher du texte le long d'une image
    Par guigui5931 dans le forum XSL/XSLT/XPATH
    Réponses: 9
    Dernier message: 02/12/2010, 12h02
  3. Afficher texte au survol d'une image
    Par jakkihm dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 18/05/2008, 13h18
  4. Afficher du texte area par dessus une image
    Par Battosaiii dans le forum Composants
    Réponses: 3
    Dernier message: 14/12/2005, 01h35
  5. PL/SQL - Comment afficher une image avec HTP ?
    Par patmaba dans le forum PL/SQL
    Réponses: 2
    Dernier message: 08/07/2004, 09h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo