Hani Sahyoun, Rechenzentrum Universität Hohenheim HTML Workshop Imagemaps (Grafiken mit klicksensitiven Bereichen) in Dreamweaver erstellen Hani Sahyoun, Rechenzentrum Universität Hohenheim
HTML-Workshop: Übung zu Imagemaps Imagemaps: Beispiel HTML-Workshop: Übung zu Imagemaps
Erste Schritte: Grafik speichern Starten Sie das Programm Mozilla und laden Sie folgende Seite: http://www.rz.uni-hohenheim.de/wegweiser/raeume/lageplan.html Klicken Sie mit der rechten Maustaste auf die Grafik und speichern Sie die Grafikdatei im Verzeichnis H:\public_html\bilder Starten Sie Dreamweaver HTML-Workshop: Übung zu Imagemaps
Erste Schritte: Grafik einfügen Gehen Sie in das Dokument-Fenster und geben Sie die Überschrift ein Fügen Sie darunter die Grafik aus dem Verzeichnis H:\public_html\bilder ein Markieren Sie die Grafik durch Klicken HTML-Workshop: Übung zu Imagemaps
Klickbare Bereiche definieren Klicken Sie im Eigenschaften-Fenster auf das Auswahlwerkzeug für die gewünschte Form (Rechteck, Kreis, Polygon) HTML-Workshop: Übung zu Imagemaps
Klickbare Bereiche definieren Zeichnen Sie mit dem Auswahlwerkzeug den ersten klickbaren Bereich und füllen Sie im Eigenschaften-Fenster die Felder Hyperlink und Alt aus HTML-Workshop: Übung zu Imagemaps
Klickbare Bereiche definieren Feld Hyperlink: geben Sie hier die URL ein für die Datei, die mit dem ausgewählten Grafikbereich verknüpft ist. Feld Alt: Geben Sie hier einen Text ein, der eingeblendet wird, wenn man mit der Maus über den ausgewählten Bereich geht. HTML-Workshop: Übung zu Imagemaps
Klickbare Bereiche definieren Wiederholen Sie den Vorgang für alle gewünschten Bereiche in der Grafik Speichern Sie die Datei anschließend ab. Für den HTML-Workshop sollte die Datei wie folgt gespeichert werden: H:\public_html\uebungen\imagemap.html Überprüfen Sie das Ergebnis in einem Browser HTML-Workshop: Übung zu Imagemaps