Bonjour à tous.

J'utilise une lightbox grâce au tuto que j'ai trouvé sur http://therapidpage.free.fr/dossiers/lightbox/lightbox.html.
Voici le code Javascript à ajouter dans l'en-tête :

<!--Start LightboxJS2-->
<link rel="stylesheet" href="http://therapidpage.free.fr/lb/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://therapidpage.free.fr/lb/js/prototype.js"></script>
<script type="text/javascript" src="http://therapidpage.free.fr/lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://therapidpage.free.fr/lb/js/lightbox.js"></script>
<!--End LightboxJS2-->

Je n'ai aucun problème quant à l'affichage des images, tout fonctionne parfaitement.
Mais ce que j'aimerai faire est un petit peu complexe.

J'ai donc cette image d'origine :



J'aimerai que lorsque je clique sur une partie de cette image, en l'occurrence une photo en miniature, une LightBox apparaisse avec les images et le texte que j'ai choissis.

Je sais créer une zone cliquable sur une image (balise Map avec dreamweaver). J'ai donc ce code-ci :

<img src="../images/cartes/louvaines_velo.jpg" alt="Circuit Autour de Louvaines, en vélo" border="0" usemap="#Map"/><map name="Map" id="Map"><area shape="rect" coords="46,142,112,206" href="#" /></map>

<

J'arrive également à afficher mes images et mon texte dans la lightbox, quand il s'agit de mettre l'effet sur plusieurs images :

<a href="../images/cartes/louvaines/hardas.jpg" rel="lightbox[roadtrip]" title="Le château du Hardas est composé d’une succession de quatre corps de bâtiments, construits aux XV° et XVI° siècles, mais remaniés au XVII° siècle et au XIX° siècle, époque à laquelle ont également été construites les parties agricoles, couvertes par des toitures à longs pans, comme il était coutume de faire à l’époque."> <img src="../images/cartes/louvaines/hardas.jpg"></a>

<a href="../images/cartes/louvaines/hardas2.jpg" rel="lightbox[roadtrip]" title="Le corps de logis du château est flanqué de part et d’autre de deux tours circulaires, aux angles nord-ouest et sud-est. La tour nord, couverte par un dôme et sommée d’un lanternon, comporte une corniche à modillons. Elle accueille par ailleurs un escalier tournant métallique, installé au siècle dernier (voir si XX° ?). Une autre tour d’escalier à vis dans œuvre est visible sur la façade orientale, accolée au nord du pavillon central. Un petit pavillon indépendant du logis principal et ouvrant sur le jardin se découpe au sud-est de l’édifice."><img src="../images/cartes/louvaines/hardas2.jpg"></a>

<a href="../images/cartes/louvaines/hardas3.jpg" rel="lightbox[roadtrip]" title="Le gros œuvre de ces constructions est en moellon de grès, tandis que les lucarnes, l’entourage des baies et les corniches sont en pierre de taille de tuffeau. Les lucarnes, d’ailleurs, sont amorties de frontons-pignons à rampants festonnés, sur lesquels sont inscrites des armoiries martelées, malheureusement illisibles. À l’est, les baies de la façade dont encadrées par des chambranles à crossettes, tandis que celles de la face ouest disposent de pilastres ioniques, longs et étroits."> <img src="../images/cartes/louvaines/hardas3.jpg"></a>

Mais là où je bloque, c'est quand il s'agit de faire comme je vous l'ai dit, à savoir lier le code d'affichage de la LightBox à la balise Map (c'est-à-dire à une partie de l'image principale).

J'ai cherché par plusieurs moyens, mais je n'ai rien trouvé de concluant.
Je vous remercie d'avance de votre aide !

Je ne crois pas que tu puisses... Enfin pas avec Lightbox en tous cas...

Il te faudrait quelque chose de plus personnalisable...

Pour que tu puisses ordonner l'ouverture de la box lors du clic sur les parties de la map...

Regarde éventuellement du côté de ShadowBox par exemple.

A mince bon et bien je vais essayer d'organiser cette partie de mon site différemment.

Si jamais quelqu'un a une solution avant demain, je suis preneur ! Sinon je vais réorganiser tout ça.

Merci !

Je me permet de réupper mon topic.

Merci d'avance !

Bah tu peux y faire avec des images mappées... mais dans une box, il te faudra la refaire toi même...

As-tu regardé du côté de Shadowbox comme je t'y avais invité ?

Citation : Golmote

As-tu regardé du côté de Shadowbox comme je t'y avais invité ?

Oui j'ai regardé, et je n'ai trouvé aucune solution à mon problème sur les sites anglais. On m'a répondu qu'il y aurait une possibilité si je modifiai directement le code JS, mais mes compétences ne vont pas jusque là. Donc je pense que je vais laisser tomber et changer l'organisation de ma page.
Merci quand même.

Allons allons, ne désespérons pas, et lançons nous là-dedans avec Shadowbox, tu verras c'est pas extrêmement compliqué. (Mais je suis d'accord qu'il s'agit de JS un peu plus avancé qu'en temps normal... Tant mieux, ça va te faire progresser )

Alors, tout d'abord, il faut que tu télécharges Shadowbox ici (laisse les trucs par défaut, en "build" et "zip", donc.)

Tu dézippes le dossier, et tu le places dans ton dossier de travail.

Dans ta page, tu vas devoir inclure le CSS et le JS de Shadowbox. Fais attention aux chemins des fichiers. Chez moi, ça donne ça :

<head>
<link rel="stylesheet" type="text/css" href="shadowbox-build-3.0b/shadowbox.css">
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
</head>

Ensuite, si on suit les indications de la doc, il faut initialiser Shadowbox. On va profiter de ça pour indiquer qu'on la veut en français

<head>
<link rel="stylesheet" type="text/css" href="shadowbox-build-3.0b/shadowbox.css">
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
  language : "fr"
});
</script>
</head>

Voilà, maintenant on est prêt à utiliser toute la magie de Shadowbox

Dans ton cas, on veut que le clic sur les <area> de la <map> ouvre l'image indiquée dans le href de l'<area> .

Occupons-nous d'abord du code HTML. Chez moi, j'ai fait un petit exemple bidon, pour que tu ne te perdes pas :

<body>
<map name="testmap">
<area shape="rect" coords="0,0,115,72" href="http://www.siteduzero.com/Templates/images/designs/2/logo_sdz_fr.png">
<area shape="rect" coords="0,72,115,144" href="http://www.siteduzero.com/Templates/images/designs/2/zozor.png">
</map> 

<img src="http://www.siteduzero.com/Templates/images/designs/2/zozor.png" usemap="#testmap" />

</body>

On a donc un joli Zozor. La moitié supérieure de l'image ouvrira le logo du SdZ, tandis que la moitié inférieure ouvrira ... Zozor !

Ok.

Maintenant on s'attaque au JS.

Alors... on veut tout d'abord récupérer les élément <area> .

Donc on va mettre ceci juste avant </body> :

<script type="text/javascript">
window.onload=function() {
  var ar = document.getElementsByTagName("area");
};
</script>
</body>

Jusque là, tout va bien.

Ensuite, on veut affecter une action au clic sur chacun de ces area. En JS, ça veut dire : une boucle for , et des onclick !

window.onload=function() {
  var ar = document.getElementsByTagName("area");
  for(var i=0,l=ar.length;i<l;i++) {
    ar[i].onclick=function() {
    /* Ici on mettra les actions... */
    };
  }
}

Et donc, au clic, que veut-on ? On veut ouvrir une Shadowbox ! Tadaa ! La doc nous dit : "il y a une méthode open() !". Ok :

window.onload=function() {
  var ar = document.getElementsByTagName("area");
  for(var i=0,l=ar.length;i<l;i++) {
    ar[i].onclick=function() {
      Shadowbox.open({
        /* Ici les options... */
      });
    };
  }
}

Les options... d'après la doc toujours, on voit qu'on va avoir besoin de préciser : ce qu'on veut ouvrir et avec quel player on veut l'ouvrir.
Nous, on utilisera le player "img", tout simplement. Et on souhaite ouvrir... ce qu'on a mis dans le href des <area> ... Aïe, là on va avoir des problèmes...

Au premier abord, on a envie d'écrire ça...

window.onload=function() {
  var ar = document.getElementsByTagName("area");
  for(var i=0,l=ar.length;i<l;i++) {
    ar[i].onclick=function() {
      Shadowbox.open({
        content: this.href,
        player: "img"
      });
    };
  }
};

En se disant que this fait référence au <area> en cours... Mais non ! Pas de bol ! this fait ici référence à l'objet Shadowbox ... mince alors !

Comment on fait ? On utilise une petite astuce, pour "enregistrer" dans une variable le this qu'on voulait :

window.onload=function() {
  var ar = document.getElementsByTagName("area");
  for(var i=0,l=ar.length;i<l;i++) {
    ar[i].onclick=function() {
      var that = this; // Ici, le this est bien le ar[i]
      Shadowbox.open({
        content: that.href, // On utilise le this qu'on a "enregistré"
        player: "img"
      });
    };
  }
};

Aaah, là on y est presque...
Mais il demeure un problème... Le clic sur un <area> entraîne automatiquement l'ouverture du href sans Shadowbox. C'est le comportement par défaut du navigateur.
Il faut empêcher ça !
Et pour cela rien ne vaut un petit return false !

window.onload=function() {
  var ar = document.getElementsByTagName("area");
  for(var i=0,l=ar.length;i<l;i++) {
    ar[i].onclick=function() {
      var that = this;
      Shadowbox.open({
        content: that.href,
        player: "img"
      });
      return false;
    };
  }
};

Et tadaa ! Ca fonctionne !

Bon, j'espère ne pas t'avoir perdu en chemin. Et aussi que tu as compris comment on s'y était pris

Je te mets le code complet, histoire de s'assurer que tu n'as pas oublié des bouts ici et là

<head>
<link rel="stylesheet" type="text/css" href="shadowbox-build-3.0b/shadowbox.css">
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
  language : "fr"
});
</script>
</head>
<body>
<map name="testmap">
<area shape="rect" coords="0,0,115,72" href="http://www.siteduzero.com/Templates/images/designs/2/logo_sdz_fr.png">
<area shape="rect" coords="0,72,115,144" href="http://www.siteduzero.com/Templates/images/designs/2/zozor.png">
</map> 

<img src="http://www.siteduzero.com/Templates/images/designs/2/zozor.png" usemap="#testmap" />

<script type="text/javascript">
window.onload=function() {
  var ar = document.getElementsByTagName("area");
  for(var i=0,l=ar.length;i<l;i++) {
    ar[i].onclick=function() {
	  var that = this;
	  Shadowbox.open({
	    content: that.href,
		player: "img"
	  });
	  return false;
	};
  }
};
</script>
</body>

Il est chaud bouillant Golmote

Comme la braise !

Demain, j'vais tout déchirer

Alors pour commencer un énorme merci, parce que effectivement ça avance !!! J'ai tout suivi et tout compris Mon image en href s'ouvre bien avec la shadowbox.
D'ailleurs une question me vient à l'esprit : est-tu humain Parce que expliquer en ci peu de temps et de manière parfaite, je trouve ça exceptionnel !

MAIS, ce que j'aimerai maintenant, c'est avoir une suite d'images lorsque l'on clique sur la zone (comme une lightbox normale en fait, c'est à dire plusieurs images que l'on peut faire défiler, avec un texte d'accompagnement). Et j'imagine que c'est là que les choses vont se compliquer ...
Si jamais tu as une solution, je suis preneur. Si ça devient trop compliquer, ne te prends pas la tête, je saurai me débrouiller avec cette technique là déjà.
MERCI !!!

Euh... humain ? Non, je suis un champignon, mais c'est pas important


Alors en fait, figure-toi que j'ai trouvé comment résoudre ton nouveau problème de manière encore plus simple que le précédent. (Comment ? Grâce à la doc, bien entendu !)

Alors. On va modifier le window.onload , et tu vas voir, c'est révolutionnaire.

Plutôt que de se casser la tête à mettre des onclick pour chaque area, on va simplement dire à Shadowbox de se débrouiller toute seule.

Pour ça, on va utiliser Shadowbox.setup() .

window.onload=function() {
  Shadowbox.setup();
};

On va lui dire de fonctionner sur les <area> , et on va lui préciser, grâce aux options, qu'on veut une galerie.

window.onload=function() {
  Shadowbox.setup("area", {
    gallery : "nom_de_la_galerie"
  });
};

Et voilà, c'est déjà fini !

Tu peux également ajouter un attribut title à tes <area> pour que le titre soit affiché.

Code final de l'exemple :

<head>
<link rel="stylesheet" type="text/css" href="shadowbox-build-3.0b/shadowbox.css">
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
  language : "fr"
});
</script>
</head>
<body>
<map name="testmap">
<area title="Logo du SdZ" shape="rect" coords="0,0,115,72" href="http://www.siteduzero.com/Templates/images/designs/2/logo_sdz_fr.png">
<area title="Zozor" shape="rect" coords="0,72,115,144" href="http://www.siteduzero.com/Templates/images/designs/2/zozor.png">
</map> 

<img src="http://www.siteduzero.com/Templates/images/designs/2/zozor.png" usemap="#testmap" />

<script type="text/javascript">
window.onload=function() {
  Shadowbox.setup("area",{
    gallery: "nom_de_la_galerie"
	});
};
</script>
</body>

(Ralala, pourquoi faire compliqué quand on peut faire si simple... Moi aussi j'en apprends ! )


EDIT : Au fait, note quand même que le code précédent était beaucoup plus intéressant (du point de vue de l'apprentissage). Donc ne soit pas dégoûté d'avoir dû lire mon looong post juste pour une solution toute simple au final.
Si tu as compris le code précédent, alors tu as fait un bon pas en avant dans la compréhension du JS

Merci pour ta réponse rapide.
Désolé d'être insistant, mais là je n'ai pas compris ton dernier code. Je ne vois pas comment, grâce à ce code, lorsque je vais cliquer sur la "vignette", j'aurai différentes images (que j'ai choisis préalablement)qui apparaîtront ?
Car cette opération, je vais devoir la répéter sur CHAQUE vignettes (qui d'ailleurs ce sont transformés en pictogrammes. Je vais mettre à jour mon image). J'aurai donc 9 <area> différentes.

POUR RESUMER :

Chaque Pictogramme devra m'ouvrir une ShadowBox avec 2-3 images différentes : il me faut donc 9 galeries!

Merci d'avance et désolé de mes questions :s

Je connais pas shadowbox (et la flemme d'aller voir), mais si tu fais des pages avec les 2-3 images en question avec le style que tu veux et que tu demandes à la shadowbox de charger la page HTML (avec un lien vers la page html dans le <area> donc) ça marcherait pas ça ?

Si ça marcherai, c'était d'ailleurs ma solution de secours avant que Golmote arrive à ma rescousse! Mais l'idéal serait que tout s'ouvre dans une même page. C'est là où est toute la "complexité" (du moins pour les débutants) de mon problème.

Ah ok.

Bon alors. Je pense que le plus simple, c'est de rajouter des <area> invisibles... qui indiqueront les autres images chaque galerie.

Et pour repérer les galeries, on va leur mettre des class différents. (Le mieux aurait été de leur mettre des "rel" mais je ne crois pas que ce soit valide...)

Bref, regarde ce code, y'a rien de bien compliqué.

<head>
<link rel="stylesheet" type="text/css" href="shadowbox-build-3.0b/shadowbox.css">
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
  language : "fr"
});
</script>
</head>
<body>
<map name="testmap">
<!-- Début de la première galerie (class "gal1") -->
<area class="gal1" title="Logo du SdZ" shape="rect" coords="0,0,115,72" href="http://www.siteduzero.com/Templates/images/designs/2/logo_sdz_fr.png">
<area class="gal1" title="Deuxieme image" href="http://www.customxp.net/PngFactory/png/_thumb/11906-Tatice-Konqueror.png">
<area class="gal1" title="Et de trois" href="http://www.customxp.net/PngFactory/png/_thumb/8642-skorpiux-InternetExplorer7.png">

<!-- Début de la deuxième galerie (class "gal2") -->
<area class="gal2" title="Zozor" shape="rect" coords="0,72,115,144" href="http://www.siteduzero.com/Templates/images/designs/2/zozor.png">
<area class="gal2" title="Un autre titre" href="http://www.customxp.net/PngFactory/png/_thumb/14101-Kolmis-firefox.png">
<area class="gal2" title="Un troisième titre" href="http://www.customxp.net/PngFactory/png/_thumb/13895-Pollanza-OperaGrey.png">

</map> 

<img src="http://www.siteduzero.com/Templates/images/designs/2/zozor.png" usemap="#testmap" />

<script type="text/javascript">
window.onload=function() {
  Shadowbox.setup("area.gal1", {
    gallery : "gal1"
  });
  Shadowbox.setup("area.gal2", {
    gallery : "gal2"
  });
};
</script>
</body>

Les <area> sans coords sont invisibles.

On effectue le setup() par rapport à la class.


A noter que si tu as beaucoup de galeries différentes, il sera peut-être judicieux de faire une boucle...

Ouiiiii Merci énormément Golmote ça marche !!! C'est exactement ce que je voulais
MERCI MERCI MERCI MERCI MERCI !!!!
GOLMOTE PRESIDENT !

Bonjour et merci pour ces informations qui m'ont permis de paramétrer (en partie) la shadowbox.
Cependant, je rencontre quelques problèmes lorsque je souhaite afficher une page HTML dans la box.
Je souhaite, depuis une carte, ouvrir une page via la Shadowbox. J'ai utilisé la méthode area pour mettre des liens sur ma carte :

<img title="Ma carte" src="Ma carte" alt="carte par département" width="605" height="470" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="41,167,95,153,149,152,153,178,153,202,157,233,138,237,146,263,157,264,164,267,163,280,152,282,152,298,97,273,92,282,66,287,17,247,6,171"  href="http://www.google.fr alt="Finistere" title="test" />

Au début j'avais testé de mettre mes rel à l'intérieur de la balise AREA (en vain). Ensuite et après avoir effectué quelques recherches sur ce forum, j'ai utilisé ceci :

<script type="text/javascript">
window.onload=function() {
  var ar = document.getElementsByTagName("area");
  for(var i=0,l=ar.length;i<l;i++) {
    ar[i].onclick=function() {
	  var that = this;
	  Shadowbox.open({
		content: that.href,
		player: "html",
		width: "900"
	  });
	  return false;
	};
  }
};
</script>

Ce script me parait assez logique : il va chercher dans la balise area le contenu du "href" pour l'afficher via son player HTML.
Sauf que le résultat est frustrant, la box s'ouvre et m'affiche en "texte" l'url de la cible...
Je suis preneur d'une idée magique qui me permettrait d'afficher ma page plutôt que l'URL :).

Merci par avance.