Integration Lytebox + area shape

Version imprimable

Bonjour,

Je viens à vous parce que je n'arrive pas à résoudre un problème.

J'ai une image dans une div sur laquelle je souhaite définir des zones cliquables circulaires et lorsque le visiteur clique sur ces zones une lytebox apparait et une anim flash (.swf) démarre dans la fenêtre lytebox.

Voici mon code pour la div en question :
Code:

1 2 3 4 5 6 7 <div class="zone2-qualite"> <script type="text/javascript" language="javascript" src="../js/lytebox.js"></script><link rel="stylesheet" href="../css/lytebox.css" type="text/css" media="screen" /> <img src="../jpg/fond2-qualite.jpg" alt="" width="519" height="348" border="0" usemap="#map" /> <map name="map" id="map"> <area shape="circle" coords="80,198,76" href="../flash/illustration1.swf" alt="" rel="lytebox" rev="width: 700px; height: 500px; " /> </map> </div>
Mais malheureusement ça ne fonctionne pas. L'anim flash s'ouvre à la place de ma page en cours mais pas de lytebox en vue...

Si qqn à une idée je suis preneur, ;)

En vous remerciant,

M.S

18/06/2010, 11h40
devyan

Bonjour,

Je sais que Lytebox gère les ancre A, par contre es-tu sûr qu'elle sais gérer les AREA ?

En tous cas, le code de la version téléchargeable ici ne gère que A...

devyan
18/06/2010, 12h00
MisterSnow

Bonjour devyan,

C'est une remarque interessante, mon soucis doit venir du fait que Lytebox ne gère effectivement pas les area...

Mais dans ce cas quelle serait la solution ?
Vu que mes area sont circulaire il est difficile de les remplacer par une image, car forcément rectangulaire dans ce cas...

Peut-être du coté d'un autre soft ? il me semble qu'il existe un équivalent à Lytebox du nom de Lightbox qui gère peut-être les area ? qqn peut confirmer ?
(je vais essayer de me renseigner aussi au passage)

Merci ! ;)

Des équivalents il y en a (eu) des tas :) mais je ne sais pas si il y en a ni lesquels gèrent les map.

Lytebox n'est plus maintenu depuis un certain temps il me semble mais étant donné qu'il s'agit de Javascript tu peux toujours essayer d'ajouter la gestion des AREA en modifiant le source comme ceci par exemple...

Code:

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
//********************************************************************************/ 
// updateLyteboxItems()
// Loops through anchor tags looking for 'lytebox' or 'lyteshow' references and 
// adds onclick events to the appropriate links.
//********************************************************************************/
LyteBox.prototype.updateLyteboxItems = function() {	
	// populate array of anchors from the appropriate window (could be the parent or iframe document)
	var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
	var areas = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('area') : document.getElementsByTagName('area');
	anchors = areas.concat(anchors);
	// loop through all anchor tags
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		var relAttribute = String(anchor.getAttribute('rel'));
		
		// use the string.match() method to catch 'lytebox' references in the rel attribute
		if (anchor.getAttribute('href')) {
			if (relAttribute.toLowerCase().match('lytebox')) {
				anchor.onclick = function () { myLytebox.start(this, false, false); return false; }
			} else if (relAttribute.toLowerCase().match('lyteshow')) {
				anchor.onclick = function () { myLytebox.start(this, true, false); return false; }
			} else if (relAttribute.toLowerCase().match('lyteframe')) {
				anchor.onclick = function () { myLytebox.start(this, false, true); return false; }
			}
		}
	}
};

devyan

18/06/2010, 15h02
MisterSnow

J'ai essayé ta solution, malheureusement sans succès...
(le résultat est le meme).
Vu que tu m'as également dit que lytebox n'était plus maintenu j'ai essayé de trouver un autre équivalent. J'ai donc trouvé Lightbox qui ne prend pas en charge les area non plus à la base mais pareil en modifiant le javascript on peut y remédier. Ce que j'ai fait en y ajoutant un morceau de code validé par de nombreux forumistes.
Malheureusement je n'ai pas pu vérifier son bon fonctionnement puisque je me retrouve avec des problèmes d'intégration dans ma page. Le "corps" de la lightbox s'affiche avec des défauts directement sur ma page sans que je clic sur quoi que ce soit.

Enfin bref, en refaisant des recherches pour remédier à ce nouveau pb, j'ai parcouru un article selon lequel Lightbox ne prend pas en charge les flash (seulement les images). :cry:

Pff les boules, je ne sait plus quoi faire...

Personne n'a jamais intégré des .swf avec une lightbox qui se charge au clic sur une area shape .?

P.S: encore merci devyan pour avoir tenté de m'aider ;)