Afficher images lorsque l'on clique sur un lien

**youchlure** · 04/11/2015, 16h13

Bonjour,

je cherche à afficher une image par dessus la page principale lorsque l'on clic sur un lien.
Puis à la fermer lorsque l'on clic dessus.

voici mon code :

Code :

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

1
2
3
4
5
6
<ul>
 <li><a href="http://www.google.fr</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">Contact</a></li>
 
</ul>

Le premier lien affiche une page internet, ça ok.
Et c'est pour le second je souhaite que lorsque que l'on appuye dessus il y ai cette image qui s'affiche :

Code :

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

<img src="images/1.jpg" alt="1" />

Merci d'avance de votre aide.

Bonne journée !

Y.

**ABCIWEB** · 04/11/2015, 18h06

Salut,

href="#" indique la même page, et sans rafraîchissement de la page tu ne pourras modifier le html existant qu'en utilisant javascript. Par exemple, en utilisant un id pour cibler l'image :

Code :

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

1
2
3
4
5
6
7
<ul>
 <li><a href="http://www.google.fr</a></li>
<li><a href="#" onclick="document.getElementById('plan').style.display='block';return false">Plan</a></li>
<li><a href="#">Contact</a></li>
</ul>
 
<img id="plan" src="images/1.jpg" alt="1" style="display:none" />

**youchlure** · 04/11/2015, 18h52

Merci pour ton aide !

Alors quand je rentre ce code, ça marche presque

En fait cela affiche bien le plan, mais cela ne l'affiche pas comme je le souhaiterais. Il s'affiche en haut de page et décale tout le reste vers le bas et surtout il n'y a pas d'option pour fermer cette image.

Ce que je souhaite c'est que l'image s'affiche seul en "surbrillance" au dessus de la page existante et que lorsque l'on reclic dessus l'image disparait et que l'on retourne à la page initiale.

Merci encore

**ABCIWEB** · 05/11/2015, 02h36

Salut,

Testes ce code dans une page séparée en ayant pris soin de renseigner le src des images avec un chemin valide.

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Affiche une image au centre de la fenêtre</title>
<style type="text/css">
.plan{
        position:fixed;
        top:50%;
        left:50%;
        display:none;
        cursor:pointer;
}
</style>
</head>
 
<body>
 
<img class = "plan" id="plan1" onclick = "Ferme(this)" src="images/1.jpg" alt="plan 1" />
<img class = "plan" id="plan2" onclick = "Ferme(this)" src="images/2.jpg" alt="plan 2" />
 
<div id = "conteneur">
    <ul>
        <li><a href="http://www.google.fr">google</a></li>
        <li><a href="#" onclick="Affiche('plan1');">Plan 1</a></li>
        <li><a href="#" onclick="Affiche('plan2');">Plan 2</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
 
<script type="text/JavaScript">
<!-- 
var conteneur = document.getElementById('conteneur');
 
function Affiche(id) // Affiche une image centrée par rapport à la fenêtre
{
        // Diminue l'opacité du conteneur
        conteneur.style.opacity = "0.4";
        
        // On cible l'image
        var img = document.getElementById(id);
        
        // On affiche l'image
        img.style.display = 'block';
        // On la positionne au centre 
        img.style.marginTop = '-'+(img.offsetHeight/2)+'px';
        img.style.marginLeft = '-'+(img.offsetWidth/2)+'px';
        // return false pour annuler le fonctionnement naturel du href
        return false;
}
 
function Ferme(el) 
{
        // On cache l'image
        el.style.display = "none";
        // On rétabli l'opacité du conteneur
        conteneur.style.opacity = "1";
}
-->
</script>
 
</body>
</html>

C'est la méthode classique. Possible qu'il existe maintenant d'autres méthodes...
Au passage c'est assez moyen de mettre des nombres comme nom d'images (pas vraiment significatif concernant le contenu).

**youchlure** · 05/11/2015, 12h53

merci pour ton aide

Afficher images lorsque l'on clique sur un lien

HTML

Vue hybride

Discussions similaires

Partager

Partager