Highslide mit Imagemaps funktioniert..
KareLo
- javascript
0 wahsaga
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
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