Image-Maps
Eine coole Alternative zu den Textlink oder den verlinkten Grafiken sind die Image-Maps. Hier werden einer Grafik verschiedene verlinkte Zonen zugewiesen.
Ich versuche nun, möglichst oft auf kleine Helferlein zurück zu greifen. Das erspart mir nicht nur Zeit, sondern oft auch Nerven. :-)
In diesem Fall werde ich das Programm 'MapEdit 2.63' verwenden. Du findest es unter 'Hilfreiche Tools'.
Das wollen wir erreichen:
Bei der Grafik 'teufel.gif' soll:
- linke Auge auf die Seite 'imagemap1.html'
- rechte Auge auf die Seite 'imagemap2.html' und
- die Zunge auf die Seite 'imagemap3.html' führen.
Vorgehen:
Wir erstellen zuerst alle Seiten und die Grafik, die wir verwenden wollen. ->Die zu verlinkende Grafik also auch schon einfügen!
(imagemap.html; imagemap1.html; imagemap2.html; imagemap3.html; teufel.gif)
Wir schliessen den HTML-Editor (sonst funktioniert es nicht).
Nun starten wir 'ImageEdit 2.63'.
Im erscheinenden Fenster suchen wir die Seite, auf der sich die zu verlinkende Grafik befindet.
(D:/hp/spezpic/imagemap.html)
Im zweiten Fenster wählen wir die Grafik, die verlinkt werden soll.
(teufel.gif)
Nun können wir die Form der Linkfläche bestimmen. Ich wähle 'Rund' für die Augen und 'Polygon' für die Zunge.
Ich setze mit der Einstellung 'Rund' den Mauszeiger in die Mitte des linken Auges. Ein Eingabefenster erscheint, in das ich das Ziel dieser Linkfläche eintrage.
(imagemap1.html)
Achtung: Linkflächen sollen sich nicht überschneiden. Sollte klar sein, wieso. ;-)
Wenn wir nun den HTML-Editor wieder öffnen und uns den HTML-Code am Seitenende der der Image-Map-Seite ansehen, hat uns der MapEdit dort einen kurzen Code eingefügt.
So einfach ist das! :o)
So sieht es aus:
