Tutorials von Thomas Frei-Herrmann

Tutorial: Formular durch Auswahl eines Bildes oder Hotspots beschreiben mittels Javascript “getElementById”

Zunächst erstellt Ihr Euch ein ganz normales Formular mittels der Werkzeuge von NOF. Ich habe hier mal nur ein Feld erstellt für den entsprechenden Text des gewählten Bildes. Wollt Ihr dieses Eingabefeld auf “nur lesen” stellen, dann guckt bitte hier.

Nun fügt Ihr Euer Bild ein und klickt im Fenster “Bild-Eigenschaften” auf den Button “Link”. Wählt im Link-Fenster dann unter
Linktyp: “Smart Link” und wählt “Leer” (das erzeugt einen leeren Javascript-Link).

Klickt im gleichen Fenster “Link” unten auf den Button “HTML” und tragt für die Option zum klicken folgenden Javascript Befehl
“im Tag” (ab NOF 11 “innen”) ein, wobei Ihr den Namen des Formular-Eingabefeldes Eures Formulars verwenden müsst und natürlich als value (Wert) Euren Text (hier “Eichhörnchen”).

onClick="document.getElementById('FormsEditField1').value = 'Eichhörnchen';"

Bei den beiden anderen Fotos habe ich es genauso gemacht, nur eben mit einem Hotspot. Also einen Hotspot auf dem Foto aufziehen und wieder den Smart-Link “leer” wählen (wie im ersten Bild oben) und dann im Fenster “Hotspot Eigenschaften” auf den Button “HTML” klicken und das Skript unten wieder “im Tag” einfügen.

onClick="document.getElementById('FormsEditField1').value = 'Peonie Hotspot on click';"

... wollt Ihr lieber, statt einem Klick, ein Mousover verwenden, macht Ihr es wieder genauso, nur eben anstelle von “onClick” verwender Ihr “onMouseover”.

onMouseover="document.getElementById('FormsEditField1').value = 'Tulpe Hotspot on mouse over';"

Eingabefeld auf “nur lesen” stellen:

Ich wollte nun auch noch, dass man in das Formular-Eingabefeld keinen Text direkt eingeben kann, sondern es sollten nur die Texte, die mit den Bildern kombiniert sind, verwendet werden. Dazu habe ich diesem Eingabefeld eine “nur lesen” Option gegeben.

> markiert das Eingabefeld und klickt im Fenster “Eingabefeld-Eigenschaften” auf den Button “HTML”

Fügt nun “im Tag” (ab NOF 11 “innen”) noch folgenden Befehl hinzu.

readonly

Vielen Dank für die Unterstützung zu diesem Tutorial an Klaus2 !

Viel Erfolg !

nach oben