Image cliquable sous différents navigateurs

**Neelix57** · 24/08/2023, 15h19

Bonjour,

Dans le cadre de la restauration d'un ancien site perso, je cherche à rendre une image cliquable en HTML5.
J'y parviens bien, mais seulement voilà, si mes liens apparaissent au b on endroit sur la page sous Firefox, sous Chrome et Opera,
mes images sont complètement décalées.

En fait, j'affiche une grande image, sur laquelle, je place deux images plus petites, qui sont liens.

Quel'qu'un pourrait-il me venir en aide, s'il vous plaît ?

Voici mon code HTML:

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="Tableau_01">
	<img id="idxImg" src="images/index.jpg" alt="">
    <a href="elsewhere/elseindex.htm"><img src="images/index_elsewhere.gif" alt=""></a>
    <a href="menu/menu.htm"><img src="images/index_oneday.gif" alt=""></a>
 
    <video id="idxVid" poster="images/poubelle2.jpg" autoplay>
        <source src="/images/poubelle2.mp4" type="video/mp4" />
    </video>
</div>

Et mon CSS:

Code css :

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
body {
    background: url("../images/background.jpg") no-repeat;
    background-size: cover;
    overflow: hidden;
}
#idxImg {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    max-width: 100%;
    z-index: 0;
}
#Tableau_01 a:nth-of-type(1) {
    position: fixed;
    top: 75.8%;
    left: 25.6%;
    width: 155px;
    height: 38px;
}
#Tableau_01 a:nth-of-type(2) {
    position: fixed;
    top: 75.8%;
    left: 62.35%;
    width: 155px;
    height: 38px;
}
#idxVid {
    display: block;
    position: fixed;
    width: 400px;
    height: 294px;
    left: 35.8%; /*32.5em*/
    top: 16em;
}