Discussion :

[l_achraf]

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

[psychadelic]

juste ajouter du css

Code css :

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

#graph1 > img { display:none; }

sinon

Code css :

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

#graph1 > img { visibility: hidden; }

si tu veux que la place utilisée par l'image ne soit pas rétrécie (à tester ?)

[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?

[psychadelic]

Code CSS :

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

#graph1 > img { display:none; }

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
    <!-- 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 JavaScript :

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

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";
    };

[NoSmoking]

Bonjour,

Code :

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

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

peut s'écrire avantageusement

Code :

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

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

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