Tutorials von Thomas Frei-Herrmann

Mouseover Hotspot

Ihr zieht Euch zunächst das erste Bild ganz normal auf Eurer Seite auf

NOF vergibt jedem Bild beim Einfügen automatisch eine “Objekt-ID”, die ich hier umbenannt habe in “fotohotspot” und zwar hier:

> Bild markieren > Fenster “Bild-Eigenschaften” > letzte Button oben rechts “Aktionen” > “Objekt-ID”

... außerdem gebt Ihr dem Bild noch den Namen zur eindeutigen Zuordnung im Javascript-Befehl

> Bild markieren > Fenster “Bild-Eigenschaften” > erste Button oben links “Allgemein” > Button “HTML”

und fügt dort den Namen (hier “fotohotspot”) “im Tag” (ab NOF 11 “innen”) ein.

name=”fotohotspot”

Zieht Euch aus Eurer allgemeinen Werkzeugleiste einen Hotspot über dem Bild auf, dort wo das nächste Bild bei Mausüber erscheinen soll.

Dann verlinkt Ihr diesen Hotspot folgendermaßen:

> Fenster “Rechteck-Hotpsot-Eigenschaften” > auf Button “Link” und macht folgendes ...

... oben unter “Linktyp:” > “Externer Link” wählen > unter “Neuer Link:” > “javascript:” wählen und in die
Eingabezeile rechts daneben schreibt Ihr:

void(0);

Dann klickt Ihr im Fenster “Rechteck-Hotpsot-Eigenschaften” unten auf den Button “HTML” und fügt den Code unten
in die “Objekt-HTML” > “im Tag” (NOF 11 “innen”) ein, wobei Ihr vorher Eure anderen Bilder in der Assets-Verwaltung einbinden solltet oder diese händisch mit Eurem FTP-Programm in den Ordner “images” ...

/assets/images

... im Verzeichnis der lokalen Publizierung auf dem PC (um es auch lokal schon zu sehen) und in das gleiche Verzeichnis auf den Server mittels FTP-Programm kopieren müsst. Bitte achtet hier auch auf die relative Pfadangabe zu diesem Ordner (images).
Ich habe das hier auf der “Home”, meiner Startseite eingebaut, daher nur ein Punkt ./
Auf einer “Unterseite”, die sich im Ordner “html” befindet, müssten dann dort zwei Punkte hin ../ (gehe einen Ordner höher)

onMouseover="fotohotspot.src='./assets/images/garten001.jpg'" title="Peonie"

... ebenso geht Ihr bei den anderen Hotspots vor (ich habe hier insgesamt 3 Hotspots direkt nebeneinander liegen) und gebt dort bei dem onMouseover-Befehl die anderen anzuzeigenden Fotos an und fertig.

nach oben

Viel Erfolg !