HTML insérer un lien sur une image

Bonjour,

Je suis debutant.et je galère beaucoup !

Sur une page Web J ai créé une image qui se nomme organigramme. Au passage de la souris sur cette image une autre image apparaît, elle se nomme organigramme2
Je souhaite maintenant intégrer un lien hypertexte sur l image organigramme 2. Mon problème c est que ne sais pas à quel endroit intégrer ce lien

Voici le lien

Code:

1
2
3
''href="/sites/rvo/FLL/DOCSITE/Feuille%20de%20route%202020.ppt"><img src="/sites/rvo/FLL/imagesite/organigramme2.png" alt="" style="margin: 5px;"/></a>
 
<p>*</p>

Et voici la source où je souhaite intégrer mon lien.

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<div class="shortpoint-display shortpoint-display2 ms-rtestate-read shortpoint-display-no-content shortpoint-display-no-title" contenteditable="false" data-display-type="before-after" data-template-name="baseTemplate" data-shortpoint-display-id="display-18" data-id="shortpoint-dynamic-188" data-sp-code="__shortpoint_start__before-after%20hover%20before-image%3D%22%252Fsites%252Frvo%252FFLL%252Fimagesite%252FORGANIGRAME.png%22%20after-image%3D%22%252Fsites%252Frvo%252FFLL%252Fimagesite%252Forganigramme2.png%22%20%2F__shortpoint_end__">
 
   <div class="shortpoint-display-toolbar-wrap ms-rtefocus-invalid" contenteditable="false">
 
      <div class="shortpoint-display-toolbar" unselectable="on">
 
         <div title="before-image=/sites/rvo/FLL/imagesite/ORGANIGRAME.png after-image=/sites/rvo/FLL/imagesite/organigramme2.png 0=hover" class="shortpoint-display-title">
 
            <div class="shortpoint-display-name">before-after</div>
 
         </div>
 
         <div class="shortpoint-display-tooltip">
 
         </div>
 
      </div>
 
      <div class="shortpoint-display-actions" unselectable="on" data-shortpoint-action-type="before-after" style="left: 85px;">
 
         <div title="Other actions" class="shortpoint-display-action shortpoint-display-action-more">
 
            <div aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">
 
               <i class="shortpoint-icon-fa-ellipsis-h"></i> </div>
 
            <ul class="shortpoint-display-other-actions sp-inserter-dropdown-menu sp-inserter-dropdown-menu-left">
 
               <li>
 
                  <div title="Copy" class="shortpoint-display-action shortpoint-display-action-copy shortpoint-dynamic-189" unselectable="on">
 
                     <div class="shortpoint-icon-fa-clipboard" unselectable="on">
 
                     </div>
 
                  </div>
 
               </li>
 
               <li>
 
                  <div title="Duplicate" class="shortpoint-display-action shortpoint-display-action-duplicate" unselectable="on">
 
                     <div class="shortpoint-icon-fa-copy" unselectable="on">
 
                     </div>
 
                  </div>
 
               </li>
 
               <li>
 
                  <div title="Preview" class="shortpoint-display-action shortpoint-display-action-preview" unselectable="on">
 
                     <div class="shortpoint-icon-fa-eye" unselectable="on">
 
                     </div>
 
                  </div>
 
               </li>
 
               <li>
 
                  <div title="Add Space Before" class="shortpoint-display-action shortpoint-display-action-before" unselectable="on">
 
                  </div>
 
               </li>
 
               <li>
 
                  <div title="Add Space After" class="shortpoint-display-action shortpoint-display-action-after" unselectable="on">
 
                  </div>
 
               </li>
 
               <li>
 
                  <div title="Clear Spaces Before" class="shortpoint-display-action shortpoint-display-action-clear-before" unselectable="on">
 
                     <div class="shortpoint-icon-fa-eye" unselectable="on">
 
                     </div>
 
                  </div>
 
               </li>
 
               <li>
 
                  <div title="Clear Spaces After" class="shortpoint-display-action shortpoint-display-action-clear-after" unselectable="on">
 
                     <div class="shortpoint-icon-fa-eye" unselectable="on">
 
                     </div>
 
                  </div>
 
               </li>
 
            </ul>
 
         </div>
 
         <div title="Settings" class="shortpoint-display-action shortpoint-display-action-edit" unselectable="on">
 
            <div class="shortpoint-icon-fa-cog">*</div>*</div>
 
         <div title="Remove" class="shortpoint-display-action shortpoint-display-action-delete" unselectable="on">
 
            <div class="shortpoint-icon-fa-times">*</div>*</div>
 
      </div>
 
   </div>
 
   <div class="shortpoint-display-before ms-rtefocus-invalid" contenteditable="false">
 
      <div class="shortpoint-icon-fa-angle-left" unselectable="on">*</div>*</div>
 
   <div class="shortpoint-display-after ms-rtefocus-invalid" contenteditable="false">
 
      <div class="shortpoint-icon-fa-angle-right" unselectable="on">*</div>*</div>
 
   <div class="shortpoint-display-content fr-element" contenteditable="false" data-display="content">
 
      <div class="fr-inner shortpoint-display-content-wrap {contentWrapClass}" contenteditable="true" data-display="content-wrap">
 
         <div class="ms-rtestate-write">
 
            <br class="shortpoint-display-br"/>
 
         </div>*</div>*</div>
 
</div>

Je suis vraiment néophyte et J aimerai avoir un coup de main
Merci par avance pour vos retours
Cordialement

Bonjour,

Citation:

Envoyé par natalolo

une autre image apparaît

1) Cette image apparaît-elle vraiment dans le code que tu as essayé?
2) Où fais-tu apparaître cette image???
(Je demande ça parce que ton code, en l'état, n'est pas très rapide à lire donc je préfère que tu me dises ce que tu veux faire, directement.)

HTML LIEN SUR UNE IMAGE

Bonjour,
Oui l image apparaît bien sur ma page, J ai testé et au passage de la souris l image 1 laisse bien la place à l image 2. Ma problématique. : faire un lien vers un fichier PowerPoint à partir de l image 1 ou 2 ? Et à quel endroit de mon code HTML
Merci pour votre retour

D'accord. Alors, comme ton code n'est pas plus clair maintenant:

1) Ta première image est-elle déjà dans un lien?
2) As-tu pensé que quand tu sors de l'image, la première devait revenir (et peut-être, le lien disparaître?)

(merci NoSmok: ça fait un problème en moins...)

natalolo, Mettons que je sois beau joueur et que tu m'aies donné des réponses claires, teste ce code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
 
<style>
        a img:nth-of-type(1){display:none}
        a:hover img:nth-of-type(1){display:inline}
        a:hover img:nth-of-type(2){display:none}
</style>
 
</head>
 
<body>
 
<a href="https://www.developpez.net/forums/d2096272/webmasters-developpement-web/balisage-x-html-validation-w3c/html-inserer-lien-image/">
	<img src="https://www.icône.com/images/icones/2/4/button-green.png" alt="vert" />
	<img src="https://www.icône.com/images/icones/2/4/button-red.png" alt="rouge" />
</a>
 
</body>
</html>

Mon solution :

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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <link rel="preload" as="image" href="https://www.icône.com/images/icones/2/4/button-red.png">
    <link rel="preload" as="image" href="https://www.icône.com/images/icones/2/4/button-green.png">
    <style>
      a {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-image: url(https://www.icône.com/images/icones/2/4/button-red.png);
        background-size: 100%;
      }
 
      a:hover {
        background-image: url(https://www.icône.com/images/icones/2/4/button-green.png);
      }
    </style>
  </head>
  <body>
    <a href="#"></a>
  </body>
</html>