Afficher une image au click sur un lien

Version imprimable

Bonjour,

Est ce que vous pouvez me dire svp du code javascript pour faire cela.
actuellement, l'image s'affiche au moment du téléchargement de la page et sans avoir cliqué sur text1.

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
<div id="wrapper">
 
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand">
          TEXT HERE
        </li>
        <li>
          <a href="#graph1">text1</a>
 
        </li>
        <li>
          <a href="#graph2">text2</a>
        </li>
 
 
      </ul>
    </div>
 
 
    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
 
            <button type="button" class="btn btn-info" id="menu-toggle">Show / Hide Sidebar</button>
            <div id="graph1">
              <img src="images/image.jpeg" alt="">
            </div>
 
          </div>
        </div>
      </div>
    </div>
 
 
  </div>

Merci beaucoup

06/09/2018, 20h01
psychadelic

juste ajouter du css

Code:

#graph1 > img { display:none; }

sinon

Code:

#graph1 > img { visibility: hidden; }

si tu veux que la place utilisée par l'image ne soit pas rétrécie (à tester ?)
06/09/2018, 20h49
l_achraf

Merci pour ta réponse,
Ta proposition enlève l'affichage de l'image par défaut mais comment la récuperer et l'afficher quand on clique sur href?

Code:

#graph1 > img { display:none; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand"> TEXT HERE </li>
        <li><a href="#graph1" id="href_01" >text1</a></li>
        <li><a href="#graph2">text2</a></li>
      </ul>
    </div>
    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
 
            <button type="button" class="btn btn-info" id="menu-toggle">Show / Hide Sidebar</button>
            <div id="graph1">
              <img src="imageXY.png" alt="">
            </div>
 
          </div>
        </div>
      </div>
    </div>

Code:

1
2
3
4
5
6
7
8
    var
      elm_href_01 = document.getElementById("href_01"),
      elm_graph1_IMG = document.getElementById("graph1").getElementsByTagName("img")[0]
    ;
 
      elm_href_01.onclick = function () {
      elm_graph1_IMG.style.display = "block";
    };

07/09/2018, 18h21
NoSmoking

Bonjour,

Citation:

Code:

elm_graph1_IMG = document.getElementById("graph1").getElementsByTagName("img")[0]

peut s'écrire avantageusement

Code:

elm_graph1_IMG = document.querySelector("#graph1 > img");

en utilisant le même sélecteur que pour le CSS.