Hi,
Ich möchte die Shadowbox auf mehrere Imagemaps anwenden. Ich habe bereits über ein Script aus dem Internet, die Shadowbox so verändern können, dass sie überhaupt auf Imagemaps funktioniert. Leider habe ich allerdings mehrere Imagemaps, und aktuell funktioniert es nur auf der ersten. Da ich von JS nur wenig bis gar keine Ahnung habe, könnte mir vielleicht jemand helfen.

Das modifizierte Shadow-Box:

HTML-Code:

<script type="text/javascript">
Shadowbox.init();
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
$(document).ready(function(){
    var img = $("img[usemap]");
    usemap = img.get(0).getAttribute('usemap');
    map = $('map[name="'+usemap.substr(1)+'"]');
    Shadowbox.setup($(map).find('area[coords]'));
    Shadowbox.init();
}); 
</script>

Die Imagemaps:

HTML-Code:

<map name="Map" id="Map">
  <area shape="circle" coords="610,65,58" href="img/produktdetail_amanda.jpg" alt="Amanda" />
  <area shape="circle" coords="860,65,59" href="img/produktdetail_amor.jpg" alt="Amor" />
  <area shape="circle" coords="610,203,59" href="img/produktdetail_olivia.jpg" alt="Olivia" />
  <area shape="circle" coords="857,205,60" href="img/produktdetail_xander.jpg" alt="Xander" />
</map>
<map name="Map2" id="Map2">
  <area shape="circle" coords="610,66,58" href="img/produktdetail_florian.jpg" alt="Florian" />
  <area shape="circle" coords="856,66,59" href="img/produktdetail_blossom.jpg" alt="Blossom" />
  <area shape="circle" coords="608,205,63" href="img/produktdetail_cherry.jpg" alt="Cherry" />
  <area shape="circle" coords="862,207,59" href="img/produktdetail_isabella.jpg" alt="Isabella" />
</map>
<map name="Map3" id="Map3">
  <area shape="circle" coords="610,65,57" href="img/produktdetail_felix.jpg" alt="Felix" />
  <area shape="circle" coords="860,63,56" href="img/produktdetail_sally.jpg" alt="Sally" />
  <area shape="circle" coords="613,207,59" href="img/produktdetail_mirabella.jpg" alt="Mirabelle" />
  <area shape="circle" coords="858,205,60" href="img/produktdetail_skip.jpg" alt="Skip" />
</map>
<map name="Map4" id="Map4">
  <area shape="circle" coords="672,203,56" href="img/produktdetail_madeline.jpg" alt="Madeline" />
  <area shape="circle" coords="611,62,56" href="img/produktdetail_patrick.jpg" alt="Patrick" />
  <area shape="circle" coords="737,64,58" href="img/produktdetail_ronja.jpg" alt="Ronja" />
  <area shape="circle" coords="862,66,58" href="img/produktdetail_sibyl.jpg" alt="Sibyl" />
</map>
<map name="Map5" id="Map5">
  <area shape="circle" coords="610,64,58" href="img/produktdetail_basil.jpg" alt="Basil" />
  <area shape="circle" coords="857,62,59" href="img/produktdetail_wika.jpg" alt="Wika" />
  <area shape="circle" coords="856,206,59" href="img/produktdetail_trixie.jpg" alt="Trixie" />
  <area shape="circle" coords="613,201,61" href="img/produktdetail_zephyra.jpg" alt="Zephyra" />
</map>

Image Beispiel:

HTML-Code:

<img src="img/haus_x.jpg" alt="Magisches Baumhaus"  usemap="#Map2" />

Danke