Lien clique dans le vide

**FirePrawn** · 18/07/2012, 17h34

Relis le nom de ta fonction quand tu la déclares et quand tu l'appelles... Tu comprendras pourquoi ça ne fonctionne pas

**koKoTis** · 18/07/2012, 17h40

J'ai fait cette modif:

Code :

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

         echo '<a href="'.$dir.'" rel="lightbox[roadtrip]" onclick="block(event);"><img src="'.$dir.'"  height="250" border="1" style="border-color:#0000000" onclick="block(event);return false;"></a> &nbsp;';

Mais toujours pareil.

**SpaceFrog** · 18/07/2012, 17h43

curieux parce que quand on ne se goure pas dans les noms de fonctions ça fonctionne

**koKoTis** · 18/07/2012, 17h47

oooppss

J'ai donc rectifer c'est déjà mieux:

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Galerie de Jérémie Merlin</title>
 
<!-------------------------------
Ci-dessou on appelle la pages de metas tags:
-------------------------------->
<?php
include("http://www.lunnatick.fr/fichiers_systeme/meta_global_img_tof_ect.htm");
?>
<!-------------------------------
-------------------------------->
 
<link href="../../../css_lunnatick.css" rel="stylesheet" type="text/css">
 
<style type="text/css">
<!--
body {
        margin: 0;
        padding: 0;
        background-color: #000000;
    background-repeat:repeat-x;
    background-position:top center;
}
 
.Style2 {font-size: 18px}
-->
</style>
 
<!-- Début des code d'affichage des images sur la page --->
<script type="text/javascript" src="../../../fichiers_systeme/galeries/js/prototype.js"></script>
<script type="text/javascript" src="../../../fichiers_systeme/galeries/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../../../fichiers_systeme/galeries/js/lightbox.js"></script>
<link rel="stylesheet" href="../../../fichiers_systeme/galeries/css/lightbox.css" type="text/css" media="screen" />
<!-- Fin des code d'affichage des images sur la page --->
 
<!-- Ci-dessous le script pour le clique dans le vide -->
<script type="text/javascript">
function blockE(event){
if (!event){event = window.event;}
if (event.stopPropagation) {
  event.stopPropagation();
}
event.cancelBubble = true;
}
</script>
<!-- Fin du script pour le clique dans le vide -->
 
</head>
<!--   --->
<body text="#00000000" link="#00000000" vlink="#00000000" alink="#00000000" onclick="JavaScript:history.back();">
 
 
  <div id="Layer1" style="position:fixed; width:100%; height:35px; z-index:1; left: 0px; top: 0px; background-color: #ffffff; layer-background-color: #ffffff; border: 1px none #000000;">
    <div align="center">   
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td height="36">
            <div align="center">
              <table width="98%"  border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><div align="left"><strong><a href="JavaScript:history.back();"><img src="../../../fichiers_systeme/galeries/fleche_retour_1.jpg" width="43" height="35" border="0"></a> </strong></div></td>
                  <td><div align="right"><strong><a href="JavaScript:history.back();">Retour en arri&egrave;re</a> | <a href="../../../index.html" class="Style2" onclick="blockE(event)">Sommaire du site</a></strong></div></td>
                </tr>
              </table>
            </div></td></tr>
        <tr>
          <td higth="8" bgcolor="#999999">&nbsp;</td>
        </tr>
      </table> 
    </div>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
 
<div align="center">
<?php 
$directories = glob("*.jpg"); 
foreach ($directories as $dir) 
{ 
         echo '<a href="'.$dir.'" rel="lightbox[roadtrip]"><img src="'.$dir.'"  height="250" border="1" style="border-color:#000000" onclick="blockE(event);return false;"></a> &nbsp;'; 
} 
?>
<?php
$directories = glob("*.JPG"); 
foreach ($directories as $dir) 
{ 
         echo '<a href="'.$dir.'" rel="lightbox[roadtrip]"><img src="'.$dir.'"  height="250" border="1" style="border-color:#0000000" onclick="blockE(event);return false;"></a> &nbsp;'; 
} 
?>
 
 
</div>
 
<!-- Script pour google analise --->
<script type="text/javascript" src="http://www.lunnatick.fr/fichiers_systeme/google_analys.js"></script>
<!-- Script pour google analise --->
</body>
</html>

Donc la le onclik du div n'agis plus au clique sur les photo, mais les liens des photos eux non plus n’agissent plu, coment faire ?

**SpaceFrog** · 18/07/2012, 17h52

étudier mon code ...
car dans le code donné en exemple le lien vers google fonctionne parfaitement quand tu cliques sur texte ...

**koKoTis** · 18/07/2012, 17h54

Tu veut dire que je rajoute "onclick="alert('je pars sur google');blockE(event)"" dans la balise du lien ?

Par ce que justement j'ai essayer aussi

**SpaceFrog** · 18/07/2012, 17h56

ta balise a ..; elle contient quoi ???

juste une image ....
comme tu bloque la propagation du click de l'image à la balise a, le click n'arrive pas a la balise a et tu ne peux pas clique ailleurs dans la balise a
puisqu'elle ne contient rien d'autre qu'une image ...

Dans mon exmple j'ai mis du texte avant l'image ...

**koKoTis** · 18/07/2012, 18h04

OKi, ca fonctionne.

Mais maintenant je viens de m'apercevoir que le script bloque le " rel="lightbox[roadtrip]"" dans mes liens image.

**Watilin** · 18/07/2012, 18h05

Attention, je ne sais pas qui a eu le premier l’idée d’annuler l’évènement, mais ça ne me semble pas une bonne idée.
Pour rappel, lorsqu’un évènement est lancé, il bouillonne depuis l’élément cible vers la racine du DOM (l’élément <html>). Si vous interceptez l’évènement click sur un <a> (ou un élément contenu dans le <a>), et annulez le comportement par défaut (avec preventDefault()), le lien ne sera pas suivi.

Je propose une approche radicalement différente

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
<!DOCTYPE html>
<html lang=fr>
<head>
	<meta charset=utf-8>
	<title>Clic sur le body&nbsp;?</title>
	<style>
                #image-toute-jolie {
                        display: block;
                        width: 500px;
                        height: 310px;
                        outline: dashed thin orange;
                }
        </style>
</head>
<body>
 
<img id="image-toute-jolie" src="..." alt="image toute jolie" />
<a href="http://example.com">lien</a>
 
 <script>
        window.onclick = function( event ){
                switch (event.target.tagName) {
                        case "A":
                                return;
                        case "IMG":
                                alert("C’est une image.");
                                break;
                        default:
                                alert("Et paf\xA0! Ça fait des Chocapic.");
                                // history.back();
                }
        };
</script>
 
</body>
</html>

Elle présente l’avantage de n’avoir aucun code JavaScript à rajouter dans le code HTML. Cependant, ce script fonctionne dans un cadre « idéal », il faudra l’adapter pour le rendre compatible avec les anciennes versions d’IE ; mais ce n’est pas le sujet de ce topic.

**SpaceFrog** · 18/07/2012, 18h10

Ben c'est la demande de départ ! annuler la propagation d'un image dans une balise a ...

**Watilin** · 18/07/2012, 18h13

Ce n'est pas comme ça que je vois ça

Moi quand je clique sur une image, par défaut, je m'attends à ce qu'il ne se passe rien…

**SpaceFrog** · 18/07/2012, 18h18

après ... les coups et les douleurs ...
heu les egouts et les couleurs
bref ...

**koKoTis** · 18/07/2012, 18h25

Envoyé par Watilin

Attention, je ne sais pas qui a eu le premier l’idée d’annuler l’évènement, mais ça ne me semble pas une bonne idée.
Pour rappel, lorsqu’un évènement est lancé, il bouillonne depuis l’élément cible vers la racine du DOM (l’élément <html>). Si vous interceptez l’évènement click sur un <a> (ou un élément contenu dans le <a>), et annulez le comportement par défaut (avec preventDefault()), le lien ne sera pas suivi.

Je propose une approche radicalement différente

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
<!DOCTYPE html>
<html lang=fr>
<head>
	<meta charset=utf-8>
	<title>Clic sur le body&nbsp;?</title>
	<style>
                #image-toute-jolie {
                        display: block;
                        width: 500px;
                        height: 310px;
                        outline: dashed thin orange;
                }
        </style>
</head>
<body>
 
<img id="image-toute-jolie" src="..." alt="image toute jolie" />
<a href="http://example.com">lien</a>
 
 <script>
        window.onclick = function( event ){
                switch (event.target.tagName) {
                        case "A":
                                return;
                        case "IMG":
                                alert("C’est une image.");
                                break;
                        default:
                                alert("Et paf\xA0! Ça fait des Chocapic.");
                                // history.back();
                }
        };
</script>
 
</body>
</html>

Elle présente l’avantage de n’avoir aucun code JavaScript à rajouter dans le code HTML. Cependant, ce script fonctionne dans un cadre « idéal », il faudra l’adapter pour le rendre compatible avec les anciennes versions d’IE ; mais ce n’est pas le sujet de ce topic.

Ce code et plu simple et fonctionne parfaitement, merci

Et merci a tous pour votre aide