Bildbereiche verlinken mit Image Maps
Aus twinewiki-de.net
Image Maps ermöglichen es, Bereiche eines Bildes anklickbar zu machen. Im folgenden Beispiel wird man beim Anklicken der Gesichtspartieren zu unterschiedlichen Abschnitten weitergeleitet.
Hinweise:
- Das Bild "mona-lisa.jpg" muss im selben Ordner liegen wie das fertige Spiel (siehe auch: Bilder einfügen).
- Die unter
coords
angegebenen Koordinaten definieren die linke obere und rechte untere Ecke eines rechteckigen Bildausschnitts (jeweils X- und Y-Wert in Pixeln). Zum Ermitteln der gewünschten Koordinaten können alle gängigen Apps zur Bildbearbeitung verwendet werden. - Damit die festgelegten Koordinaten funktionieren, darf die Bildgröße nachträglich nicht mehr verändert werden, z. B. mit dem Attribut
width
.
<img src="mona-lisa.jpg" usemap="#mona-lisa"> <map name="mona-lisa"> [<area shape="rect" coords="39,97,208,202">]<augen| [<area shape="rect" coords="1063,131,1258,249">]<nase| [<area shape="rect" coords="760,345,935,466">]<mund| (click: ?augen)[(goto: "Augen")] (click: ?nase)[(goto: "Nase")] (click: ?mund)[(goto: "Mund")] </map>
Versionshinweis: Twine 2.6.0 | Harlowe 3.3.4