Tutorial scrollbares Textfeld mit onMouseover über Link

Bitte verwendet ein dynamisches Seitenlayout wie z.B. in NOF 2015 “HTML5 dynamic” und kein festes Seitenlayout.

Hier habe ich zunächst ein scrollbares Textfeld erstellt. Zieht Euch ein Textfeld auf und schreibt Euren Text in das Textfeld, dabei ist es egal wie hoch das Textfeld wird, denn die Höhe bestimme ich durch das unten stehende DIV, hier auf eine Höhe von 200px.

> Textfeld markieren > Fenster Text-Eigenschaften > Button “HTML”

voher (vor dem Tag):

<div style="width: 500px; height: 200px; overflow: auto;">

nachher (nach dem Tag) das DIV wieder schließen:

</div>

Nun habe ich mir zunächst mein Bild mit dem Vogel ganz normal auf meiner Seite aufgezogen und diesem eine ID mit dem Namen “afrika” gegeben.

Bild ID

weiterhin habe ich dem Bild auch noch einen eindeutigen Namen gegeben, hier ebenfalls “afrika

> Bild markieren > Fenster Bild-Eigenschaften > Button “HTML”

innen (im Tag):

name="afrika"

Nun habe ich die zu wechselnden Bilder (hier “elefant.jpg” und “loewe.jpg”) in meine Assets-Verwaltung eingelesen und auf “Datei immer publizieren” gestellt, damit NOF diese, sonst noch nicht verwendeten Bilder, überhaupt bekannt werden und NOF diese auch mit publiziert.

Jetzt habe ich meine JavaScript-Links in den Text eingearbeitet. Markiert das zu verlinkende Wort (hier “Elefant”) und klickt im Fenster “Text-Eigenschaften” auf den Button “Link”.

Wählt > Externer Link > javascript > und schreibt in die Eingabezeile > void(0); > anschließend klickt Ihr auf den Button “HTML” im Link-Fenster.

JavaScript Link

Nun tragt Ihr in der Objekt-HTML vom Link (innen) die onMouse Befehle ein, hierbei wechselt bei mouseover das Bild vom Vogel in das Bild vom Elefanten und bei mouseout zurück zum Bild vom Vogel. Bitte achtet hier auf die korrekte relative Pfadangabe zu den Bildern, die bei mir im gleichen Verzeichnis liegen.

onMouseover="afrika.src='elefant.jpg'" onMouseout="afrika.src='vogel.jpg'"

onMouse Befehl

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik