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

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2019
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Bâtiment

    Informations forums :
    Inscription : mars 2019
    Messages : 3
    Points : 1
    Points
    1

    Par défaut Ouvrir une image dans <section>en cliquant dans <nav>

    Bonjour j'aimerai faire apparaître une image dans <section> en cliquant dans <nav> mais en restant sur la même page ( je débute....)
    exemple:là je clique sur le nom d un champignon et sa photo apparaît à côté

    mon
    Code HTML : 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
    57
    58
    59
    60
    61
    62
    <!doctype html>
    <html lang="fr">
    <head>
    <title> Balise:section header footer aside </title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
    <header>Champignons commestibles</header>
    <aside><a href="les champignons.html">Ici les champis</a></aside>
    <section>
     
        <article>informations sur la famille du champignon et son environement </article><br><br>
    	<article>nom scientifique et autres informations  </article><br><br>
    	<article>Observations personnels </article><br><br>
    </section>
    <nav> 
    <h2>Quelques champignons</h2>
       <ul>
        <li><a href="illustrations/auricula judae.jpeg">Oreille de juda</a></li>
        <li>champignon de Paris</li>
        <li>Bolet </li>
        <li>Russule </li>
       <ul>
            <li>Russule doré</li>
            <li>Russule verdoyante</li>
            <li>Russule charbonnière <br>- Russula cyanoxantha</li>
            <li>Russule comestible<br> - Russula vesca</li>
            <li>Russule couleur de belette <br>- Russula mustelina Bon comestible</li>
     
      </ul>
     
    <li>agaric champêtre </li>
    <li>morille </li>
    <li>agaric des forêts </li>
    <li>pholiote du peuplier</li> 
    <li>amanite des Césars</li> 
    <li>amanite rougissante</li> 
    <li>cèpe de Bordeaux </li>
    <li>bolet à pied rouge</li> 
    <li>girolle </li>
    <li>trompette-des-morts</li> 
    <li>champignon de Paris </li>
    <li>coulemelle </li>
    <li>pleurote en huître </li>
    <li>pleurote du panicaut</li> 
     
     
        <li>Amanite des césars</li>
        <li>Chanterelle</li>
        <li>Coprin chevelu</li>
        <li>Lactaire sanguin</li>
        <li>Morilles</li>
        <li>polyore soufré</li>
        <li>Tricholome de la St. Georges</li>
        <li>pieds bleus</li>
        </ul>
    	<a href="les champignons.html">Ici les champis</a>
    	</nav>
    <footer> <a href="les champignons.html">acceuil</a></footer>
    </body></html>
    </html>

  2. #2
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 229
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 229
    Points : 4 321
    Points
    4 321

    Par défaut

    Il y différentes façon de procéder.
    mais il faut avant donner un peu plus d'info pour que l'on puisse comprendre ce que tu veux faire.
    Pourquoi une seule image ?
    en cliquant n'importe et sur n'importe lequel des éléments de la partie nav, ou en dehors d'eux?
    et la faire apparaître ou dans la partie section ?
    dans l'un des articles ? lequel ?

    t'es bien conscient que tout cela se fait avec du javascript ?
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2019
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Bâtiment

    Informations forums :
    Inscription : mars 2019
    Messages : 3
    Points : 1
    Points
    1

    Par défaut

    d'abord un grand merci d'avoir répondu

    • 1- je ne suis pas du tout conscient qu'il fasse utiliser du java script ...je débute ,je suis inscrit à une formation de développer web débutant ( marche à suivre ?)
    • 2- j'ai bien sur une grande volonté soudaine d’apprendre ,html,css,php,c,c++,js j'ai pas encore commencé avec les tutos js
    • 3- j'ai cru voir quelque part qu'il y avait des combinaisons du genre : <a href="illustrations/Bolet.jpg"> Bolet</a> et alors target et dirigé vers une <div> je crois
    • 4- l’idée c'est de cliquer sur un des noms de champignon et de voir la photo apparaître directement dans une zone à déterminer de la page ; par exemple la totalité de la zone section ou une partie de la zone section ou une nouvelle section



    Merci beaucoup pour l'aide
    Images attachées Images attachées  

  4. #4
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 229
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 229
    Points : 4 321
    Points
    4 321

    Par défaut

    Bon, alors avant toutes choses, c’est JavaScript en un seul mot, parce qu’il existe aussi un autre langage nommé java avec on peut aussi utiliser le mot script pour parler d’un programme. A la limite tu peux écrire JS, tout le monde comprendra.
    Tu verra avec le temps toi aussi tu sera agacé qu’on puisse confondre ces 2 langages.

    Bon ensuite, il faut bien comprendre que le web, ça se passe en 2 parties, l’une sur un serveur, lautre sur le poste client.
    Sur la partie serveur tu peux avoir toutes sortes de langages comme le PHP, et autres suivant l’architecture logicielle dont il dispose. Il peut aussi se relier à un SGBD mais c’est une autre histoire.

    Le serveur fabrique la page HTML, et l’envoie sur le poste client ou le navigateur (Firefox;Edge, Chrome…) se débrouille pour en faire quelque chose de visuel.

    On parle de page HTML, mais en réalité il s’agit d’une architecture en 3 parties*: (de préférence aujourd’hui)
    – l’information de la page => en HTML5
    – le stylage de la page => en CSS3
    – la gestion des interactions sur la page => en JavaScript ( version ES6)

    le CSS3 permet de gérer de petites choses comme les animations, mais aller chercher une image sur le serveur puis l’afficher sur la page courante, en effaçant l’image précédemment affichée, ça on ne peut le faire qu’avec du JS, et de préférence avec des instructions Ajax (pas obligatoire) si on veut quelque chose de fluide pour l’utilisateur.

    ah, j'oubliais:
    <a href="illustrations/Bolet.jpg"> c'est effectivement une instruction propre au HTML, qui demande d'effacer la page courante et de la remplacer par une image qu'elle va chercher sur un serveur en utilisant la position relative indiquée.

    C'est dans la doc : https://developer.mozilla.org/fr/doc...HTML/Element/a
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 518
    Points : 33 006
    Points
    33 006

    Par défaut

    Bonjour,
    ce que tu cherches à faire est tout à fait réalisable en CSS pur en utilisant les pseudo-classe, comme :active par exemple, et en jouant avec le positionnement des éléments.

    Ceci étant, ce qui va conditionner l'utilisation du CSS VS JS sera le nombre d'images misent en oeuvre, la taille/poids ...

    Pour de petite quantité d'images et de taille raisonnable, bonjour la précision, tu peux opter pour du CSS, dans le cas contraire inutile de charger tout un tas d'images qui ne seront peut être jamais visibles, donc c'est un compromis à trouver.

    • Pour JS tu peux toujours regarder du côté des « Lightbox », il en existe des légères.

    • Pour le CSS, je te met un exemple de ce qui peut être fait simplement.
    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
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    <!DOCTYPE HTML>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[CSS] Apparition d'images</title>
    <meta name="Author" content="NoSmoking">
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.25 Verdana,sans-serif;
    }
    h1, h2, h3 {
      color: #069;
    }
    main {
      display: block;
      margin: auto;
      max-width: 60em;
    }
    #conteneur {
      position: relative;
      padding: .5em;
      border: 1px solid #BCE;
    }
    #conteneur ul {
      margin: .5em;
      padding: 0.5em;
      max-width: 10em;
      border: 1px solid #CCC;
      line-height: 2em;
      list-style: none;
    }
    #conteneur a {
      display: block;
      text-decoration: none;
      text-indent: .5em;
      cursor: pointer;
    }
    #conteneur .image {
      display: none;
      position: absolute;
      top: 2em;
      right: 2em;
      border: 10px solid #EEF8;
      box-shadow: 0 0 2em #888;
    }
    #conteneur a:focus,
    #conteneur a:active {
      outline: 1px solid #ABC;
      background: #DEF;
    }
    #conteneur a:focus .image,
    #conteneur a:active .image {
      display: block;
    }
    </style>
    </head>
    <body>
    <main>
      <header>
        <h1>[CSS] Apparition d'images</h1>
      </header>
      <section id="conteneur">
        <h2>Quelques livres</h2>
        <ul>
          <li><a href="#">Livres WEB <img class="image" src="http://club.developpez.com/webdesign/Rubriques/Web/logo_livres_devweb_old.gif" alt="logo_livres_devweb_old.gif"></a></li>
          <li><a href="#">Livres CSS <img class="image" src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_livres_css_old.gif" alt="logo_livres_css_old.gif"></a></li>
          <li><a href="#">Livres HTML<img class="image" src="http://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_livres_xhtml_old.gif" alt="logo_livres_xhtml_old.gif"></a></li>
          <li><a href="#">Livres JS  <img class="image" src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_livres_js.gif" alt="logo_livres_js.gif"></a></li>
        </ul>
      </section>
    </main>  
    </body>
    </html>

  6. #6
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2019
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Bâtiment

    Informations forums :
    Inscription : mars 2019
    Messages : 3
    Points : 1
    Points
    1

    Par défaut

    Super merci Nosmoking je vais étudier tout ça ,là je vais boire quelques tuto JavaScript sur youtube !!!!!

    ce Forum est vraiment Génial
    Grand merci et FELICITATIONS au(x) fondateur(s) du site et des forums developpez.net

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

Discussions similaires

  1. Ouvrir une image dans l'aperçu d'image windows
    Par codial dans le forum API, COM et SDKs
    Réponses: 9
    Dernier message: 18/04/2013, 14h47
  2. ouvrir une image dans une nouvelle fenêtre
    Par cFranssen dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 13/01/2011, 20h46
  3. avec click sur un lien, ouvrir une image dans une page html
    Par Bydouille dans le forum Général JavaScript
    Réponses: 20
    Dernier message: 17/10/2007, 20h40
  4. ouvrir une image dans un timage
    Par Nadirov dans le forum Delphi
    Réponses: 1
    Dernier message: 12/08/2006, 20h32
  5. Ouvrir une image dans le visioneur windows a partir d'access
    Par doudoustephane dans le forum VBA Access
    Réponses: 1
    Dernier message: 28/06/2006, 12h15

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