KareLo: Highslide mit Imagemaps funktioniert..

Jalo hat gefragt, ob Highslide mit Imahemaps (hotspots) benützt werden kann.
Die Antwort ist 'ja', obwohl ein bisschen complisiert:

Man macht zuerst von dem Bild einen jpg-basierten Slice-Satz (z.B. mit Macromedia Fireworks). In diesem Bilder-Satz ist die Slice, die dem Hotspot enstspriecht, die wichtigste und wird mit Highslide als ein normales Bild behandelt. Der Satz von Bild-Slices (und in eine Tabelle plassiert) erscheint als ein komplettes Bild in dem Webleser.

Unten is ein Kode-Beispiel (zwischen den <body>-Tags). In dem (fehlenden) Header-Teil befinden sich alle Scripts, die von Highslide notwendig sind (siehe die Higslide Web-Seite):

<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="107">
<!-- fwtable fwsrc="thumbnail2.png" fwbase="thumbnail2.jpg" fwstyle="Dreamweaver" fwdocid = "62626445" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="29" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="47" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="31" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

<tr>
   <td colspan="3"><img name="thumbnail2_r1_c1" src="images/thumbnail2_r1_c1.jpg" width="107" height="50" border="0" id="thumbnail2_r1_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="50" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="thumbnail2_r2_c1" src="images/thumbnail2_r2_c1.jpg" width="29" height="70" border="0" id="thumbnail2_r2_c1" alt="" /></td>

//Here are the Highslide expansions for the hotspot:
   <td>
<a id="thumb1" href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})">
   <img name="thumbnail2_r2_c2" id="thumb1" src="images/thumbnail2_r2_c2.jpg" width="47" height="44" border="0" id="thumbnail2_r2_c2" alt="Highslide JS" title="Click to expand" /></a></td>
// End of Highslide expansions

<td rowspan="2"><img name="thumbnail2_r2_c3" src="images/thumbnail2_r2_c3.jpg" width="31" height="70" border="0" id="thumbnail2_r2_c3" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="44" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="thumbnail2_r3_c2" src="images/thumbnail2_r3_c2.jpg" width="47" height="26" border="0" id="thumbnail2_r3_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="26" border="0" alt="" /></td>
  </tr>
</table>

//The Highslide Captions:
<div class='highslide-caption' id='caption1'>
    This caption can be styled using CSS.
</body>

KareLo, No

  1. hi,

    Jalo hat gefragt, ob

    Ach, und wo?

    Wenn du dich auf einen bereits archivierten Thread beziehst, wäre es ganz günstig, dessen URL anzugeben.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }