Archiv
Ansicht:   
Suche   erweiterte Suche

Nachricht aus dem Archiv

yeti schrieb am 28.October.2009, 20:51:39 in der Kategorie web.coding

Lightbox auch in ImageMap nutzen?

Hi,

ich muss übergangsweise auf einer vorhandenen Website drei Bilder aus einer IMageMap in einer Lightbox öffnen.

Hier hab ich die Lightbox her:
http://www.heise.de/software/download/lightbox_js/56407dl

Da gibt es eine Infoseite, in der folgendes steht:

Part 1 - Setup

   1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

      <script type=\"text/javascript\" src=\"js/prototype.js\"></script>
      <script type=\"text/javascript\" src=\"js/scriptaculous.js?load=effects,builder\"></script>
      <script type=\"text/javascript\" src=\"js/lightbox.js\"></script>

   2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

      <link rel=\"stylesheet\" href=\"css/lightbox.css\" type=\"text/css\" media=\"screen\" />

   3. Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

   1. Add a rel=\"lightbox\" attribute to any link tag to activate the lightbox. For example:

      <a href=\"images/image-1.jpg\" rel=\"lightbox\" title=\"my caption\">image #1</a>

      Optional: Use the title attribute if you want to show a caption.
   2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

      <a href=\"images/image-1.jpg\" rel=\"lightbox[roadtrip]\">image #1</a>
      <a href=\"images/image-2.jpg\" rel=\"lightbox[roadtrip]\">image #2</a>
      <a href=\"images/image-3.jpg\" rel=\"lightbox[roadtrip]\">image #3</a>

      No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!



Hab das alles auch soweit angepasst.

Leider ist die Verwendung aus einer ImageMap nicht beschrieben.

Deshalb habe ich folgendes in meinem Quelltext geschrieben:

<img src=\"pics/bild-komplett-seite1-ohnelogo.jpg\" width=\"700\" height=\"495\" border=\"0\" usemap=\"#map1\" />

<map name=\"map1\">
<area shape=\"rect\" coords=\"0,373,192,491\" href=\"images/1a.jpg\" rel=\"lightbox\" title=\"Bild1\" />
<area shape=\"rect\" coords=\"194,373,353,492\" href=\"images/2a.jpg\" rel=\"lightbox\" title=\"Bild2\" />
<area shape=\"rect\" coords=\"355,374,532,494\" href=\"images/3a.jpg\" rel=\"lightbox\" title=\"Bild3\" />
</map>



Die Einträge im Header der Seite stimmen, hab ich entsprechend angepast, bzw. übernommen.

Das Ergebnis ist jetzt bim Anklicken des entsprechenden Rechtecks für beispielsweise Bild1, wird das Bild zwar abgedunkelt, es erscheint aber kein Bild...

Jetzt vermute ich da einen Zusammenhang mit dem ImageMap. Die Beschreibung der Lightbox geht davon aus, dass es ein Thumbnail gibt, von dem aus zum \"großen Bild\" verlinkt wird. Das hab ich hier nicht.

Habt ihr eine Idee?

Ich mach das in 4 - 8 Wochen sowieso neu, deshalb muss ich das hier nur einigermassen hinbasteln. Länger wie 1 - 2 Stunden darf das eigentlich auch nicht dauern, sonst lohnt das nicht mehr.  ;-)

Vielen Dank im voraus,
Yeti

Archiv
Ansicht:   
Suche   erweiterte Suche
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz