Se connecter / S'enregistrer

Résolu Problème navigateurs avec images multi-cliquable

Solutions (9)
Tags :
  • Lightbox
  • Programmation
|
Bonjour à tous, je suis en train de faire un mini-site pour une association dont je suis le responsable communication.

J'ai réussi à coder une image avec différents endroits cliquables (6 ou 7 par images).
Chaque endroit cliquable ne doit pas renvoyer vers une nouvelle page, mais doit ouvrir (via une lightbox) une nouvelle petite image sur la même page.

Ca marche parfaitement bien avec Safari. Cependant, sous IE et FireFox, ça ne fonctionne pas du tout.

Voici un bout du codage, je peux vous donner toutes les informations dont vous avez besoin.


src="lightbox.js" language="javascript">
<center><img src="images/bureau.png" border="0" usemap="#Map">
<map name="Map">
href="images/ac986674.png" rel="lightbox"><map name="Map1">
<area shape="poly" coords="294,250,305,233,412,232,412,244,414,250" href="#1">

href="images/ac263527.png" rel="lightbox"><map name="Map1">
<area shape="poly" coords="106,109,114,106,122,110,122,181,115,183,106,183" href="#2">

href="images/ac754935.png" rel="lightbox"><map name="Map1">
<area shape="poly" coords="44,272,38,288,138,285,135,275,107,275,106,271" href="#3">

href="images/ac254796.png" rel="lightbox"><map name="Map1">
<area shape="poly" coords="742,270,740,283,782,280,781,270,749,269" href="#4">

href="images/indice.png" rel="lightbox"><map name="Map1">
<area shape="poly" coords="458,376,446,436,479,449,484,421,459,419,456,402,462,402,460,389,475,389,480,385,476,379" href="#v">

href="images/ac859485.png" rel="lightbox"><map name="Map1">
<area shape="poly" coords="272,529,260,572,356,575,343,535" href="#5">

href="images/ac336274.png" rel="lightbox"><map name="Map1">
<area shape="poly" coords="582,175,584,169,679,165,684,178" href="#6">

map>

Si quelqu'un trouve de quoi m'aider, je vous en serais très reconnaissant.
Bien cordialement,
LVB
Contenus similaires
Meilleure solution
partage
, Modérateur |
Salut,

Etonnant que Safari reconnaisse ça, parce que ce n'est pas du tout valide ce que tu as fait.
On ne peut pas mettre de <a> dans une <map>, et on ne met pas non plus plusieurs <map> dans une autre <map> (surtout que tu ne fermes pas les <map>).

Le format d'une map est:
  1. <map>
  2. <area />
  3. <area />
  4. <area />
  5. ...
  6. </map>


Et les liens sont mis dans le <area> qui prend l'attribut href.

A mon avis, tu devrais plutôt modifier la lightbox pour qu'elle prenne en charge les <area> aussi

Edit: et pour faire ça, dans le fichier lightbox.js:
Dans la fonction initLightbox() (environ ligne 282)
Remplace les lignes:
  1. if (!document.getElementsByTagName){ return; }
  2. var anchors = document.getElementsByTagName("a");


Par
  1. if (!document.getElementsByTagName){ return; }
  2. var anchors = document.getElementsByTagName("a");
  3. var areas = document.getElementsByTagName("area");
  4. anchors = anchors.concat(areas);


Et ça devrait le faire (il faudra que tu mettes un rel="lightbox" dans ton <area> aussi).
  • Commenter cette solution |
Score
0
òh
òi
, Modérateur |
Salut,

Tu viens de cliquer dessus en faisant "Elire meilleure réponse". Ce n'est juste plus une coupe comme avant ;) 
Tu ne devrais plus recevoir de mails maintenant.
  • Commenter cette réponse |
Score
0
òh
òi
|
Bonjour,

Le problème est résolu mais je n'arrive pas à trouver la 'coupe' pour alerter la fin de ce sujet.
Quelqu'un peut le faire à ma place pour éviter que je reçoive encore des mails me demandant si c'est good.
  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par lavalleebleue.
  • Commenter cette réponse |
Score
0
òh
òi
|
Salut.

Alors en fait, j'ai traficoté avec une amie une thickbox et j'ai laissé tombé la lightbox. Normalement c'est en ligne et ça fonctionne partout.

Pour moi c'est good, merci de votre aide.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Est-ce que tu peux mettre le code à jour sur ton site, c'est plus facile pour pouvoir faire des modifications, comme ça il y a la bonne version de la lightbox, et puis tes images sont dispos.
  • Commenter cette réponse |
Score
0
òh
òi
|
Salut, merci pour votre réponse, c'est sympa d'accepter de me donner un coup de pouce.

Maintenant ça ne marche plus sous safari, mais le code semble un peu plus correct (et je suppose que sous les autres c'est pareil)

Voici le code HTML placé

  1. <script src="lightbox.js" language="javascript"></script>
  2. <center>
  3. <img src="images/armoire.png" width="718" height="636" border="0" usemap="#Map">
  4. <map name="Map" id="Map">
  5. <area shape="rect" coords="456,371,486,403" href="images/searcharmoire.png" rel="lightbox" />
  6. </map>
  7. </center>
  • Commenter cette réponse |
Score
0
òh
òi
|
Pour mieux assimiler le problème, vous pouvez vous rendre sur cette page :
http://levillagedoctobre.lavalleebleue.fr/imgannecharlo...

Dans l'image centrale, cliquez sur la feuille qui se trouve sur le bureau
Résultat escompté : celui obtenu via un navigateur safari.

Merci à vous
  • Commenter cette réponse |
Score
0
òh
òi
|
  1. <script src="lightbox.js" language="javascript"></script>
  2. <p><center><img src="images/bureau.png" border="0" usemap="#Map">
  3. <map name="Map">
  4. <a href="images/ac986674.png" rel="lightbox"><map name="Map1">
  5. <area shape="poly" coords="294,250,305,233,412,232,412,244,414,250" href="#1">
  6. </a>
  7. <a href="images/ac263527.png" rel="lightbox"><map name="Map1">
  8. <area shape="poly" coords="106,109,114,106,122,110,122,181,115,183,106,183" href="#2">
  9. </a>
  10. <a href="images/ac754935.png" rel="lightbox"><map name="Map1">
  11. <area shape="poly" coords="44,272,38,288,138,285,135,275,107,275,106,271" href="#3">
  12. </a>
  13. <a href="images/ac254796.png" rel="lightbox"><map name="Map1">
  14. <area shape="poly" coords="742,270,740,283,782,280,781,270,749,269" href="#4">
  15. </a>
  16. <a href="images/indice.png" rel="lightbox"><map name="Map1">
  17. <area shape="poly" coords="458,376,446,436,479,449,484,421,459,419,456,402,462,402,460,389,475,389,480,385,476,379" href="#v">
  18. </a>
  19. <a href="images/ac859485.png" rel="lightbox"><map name="Map1">
  20. <area shape="poly" coords="272,529,260,572,356,575,343,535" href="#5">
  21. </a>
  22. <a href="images/ac336274.png" rel="lightbox"><map name="Map1">
  23. <area shape="poly" coords="582,175,584,169,679,165,684,178" href="#6">
  24. </a>
  25. </map>
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS