Combiner une zone cliquable avec effet lightbox?

Version imprimable

Bonjour, je suis assez novice en webmastering, j'espère que je poste au bon endroit.
Alors j'ai un petit soucis, sur mon site je voudrais faire une galerie photo mais en combinant l'effet lightbox et différentes zones clicables sur une même photo.
L'effet désiré est que, j'ai un montage de plusieurs petites photos qui sont disposées comme si on les avait jeté sur la page et je voudrais qu'en cliquant sur une des miniatures, la photo s'ouvre en grand avec l'effet lightbox.
J'arrive presque à mes fins mais quand je clique sur la zone désirée, le fond s'assombri mais rien ne se passe.
Voici la page test: http://yali.fr/photos.html
le code sur ma page est le suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div style="text-align: center;">&nbsp; <img src="http://yali.fr/photos/castel/galeriecastel.png" usemap="#map" border="0" height="346" width="568">&nbsp; <map name="map"><!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:manuel -->
<area shape="poly" coords="9,77,147,42,170,136,53,125,46,169,32,171,31,170,33,170,33,169" href="http://yali.fr/photos/castel/01.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="143,17,144,41,150,40,168,119,258,114,257,15" href="http://yali.fr/photos/castel/02.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="261,14,261,110,382,110,381,42,408,44,405,12,405,13" href="http://yali.fr/photos/castel/03.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="384,46,383,132,456,109,466,146,519,143,518,45,519,45,516,45" href="http://yali.fr/photos/castel/04.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="205,119,257,118,320,154,311,156,324,205,315,221,269,220,272,241,255,232,252,215,234,219,200,195,201,137,193,136" href="http://yali.fr/photos/castel/05.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="274,223,338,224,339,322,273,316" href="http://yali.fr/photos/castel/06.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="399,208,555,232,542,329,380,307" href="http://yali.fr/photos/castel/07.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="104,240,147,234,195,239,196,228,248,220,266,316,118,340" href="http://yali.fr/photos/castel/08.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="53,127,200,138,192,238,46,227,45,226" href="http://yali.fr/photos/castel/09.jpg" rel="lightbox[Castel]">
<area shape="poly" coords="315,158,454,112,484,204,452,213,396,206,390,239,345,253,342,235,342,219,335,222" href="http://yali.fr/photos/castel/10.jpg" rel="lightbox[Castel]">
 
 
</map></div>

Je suis sous ubuntu lucid et fais ça avec kompozer, gimp, filezilla.
Voilà si quelqu'un sait comment résoudre ce casse tête, je suis preneur!
Merci d'avance

17/03/2011, 21h55
ornitho13

Tu devrais utiliser un navigateur avec un debuggeur, tu verras qu'il y a une erreur javascript quand on clique sur l'image.

A priori, tu devrais regarder la documentation de lightbox pour voir si tu peux ajouter le "rel" sur un <area>. Pas sur que cela soit le cas.
17/03/2011, 22h07
Payo Manuel

Merci

Salut je vais essayé de voir la doc mais ce je j'ai trouvé est en anglais et j'y pige pas grand chose. A par ça je crois pas qu'il y ai d'erreur js firebug ne semble rien me dire

Je viens de trouver la solution à ton problème. Dans ton <area> remplace les "poly" par "rect" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:manuel -->
<area shape="rect" coords="9,77,147,42,170,136,53,125,46,169,32,171,31,170,33,170,33,169" rel="lightbox[Castel]" href="http://yali.fr/photos/castel/01.jpg">
<area shape="rect" coords="143,17,144,41,150,40,168,119,258,114,257,15" href="http://yali.fr/photos/castel/02.jpg" rel="lightbox[Castel]">
<area shape="rect" coords="261,14,261,110,382,110,381,42,408,44,405,12,405,13" href="http://yali.fr/photos/castel/03.jpg" rel="lightbox[Castel]">
<area shape="rect" coords="384,46,383,132,456,109,466,146,519,143,518,45,519,45,516,45" href="http://yali.fr/photos/castel/04.jpg" rel="lightbox[Castel]">
<area shape="rect" coords="205,119,257,118,320,154,311,156,324,205,315,221,269,220,272,241,255,232,252,215,234,219,200,195,201,137,193,136" href="http://yali.fr/photos/castel/05.jpg" rel="lightbox[Castel]">
<area shape="rect" coords="274,223,338,224,339,322,273,316" href="http://yali.fr/photos/castel/06.jpg" rel="lightbox[Castel]">
<area shape="rect" coords="399,208,555,232,542,329,380,307" href="http://yali.fr/photos/castel/07.jpg" rel="lightbox[Castel]">
<area shape="rect" coords="104,240,147,234,195,239,196,228,248,220,266,316,118,340" href="http://yali.fr/photos/castel/08.jpg" rel="lightbox[Castel]">
<area shape="rect" coords="53,127,200,138,192,238,46,227,45,226" href="http://yali.fr/photos/castel/09.jpg" rel="lightbox[Castel]">
<area shape="rect" coords="315,158,454,112,484,204,452,213,396,206,390,239,345,253,342,235,342,219,335,222" href="http://yali.fr/photos/castel/10.jpg" rel="lightbox[Castel]">
 
            </map>

17/03/2011, 22h13
Payo Manuel

Résolu

Ouaiêêê ça marche j'ai trouvé la solution ici: http://forum.joomla.fr/showthread.ph...-r%C3%A9active
Merci quand même!