Ouvrir une image dans <section>en cliquant dans <nav>

**Pat2Max** · 13/03/2019, 22h29

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>

**psychadelic** · 13/03/2019, 23h54

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 ?

**Pat2Max** · 14/03/2019, 08h39

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

**psychadelic** · 14/03/2019, 16h00

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

**NoSmoking** · 15/03/2019, 10h11

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>

**Pat2Max** · 15/03/2019, 12h34

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

Ouvrir une image dans <section>en cliquant dans <nav>

HTML

Discussions similaires

Partager

Partager