Tutorial onMouseover Bild vergrößern

Hier mal ein einfaches Beispiel zur Anwendung des Befehls “onMouseover”.

In diesem Fall wird bei Maus über einem kleinen Bild (Thumbnail) das gleiche Bild vergrößert dargestellt (natürlich könnte man ebensogut das Bild wechseln). Im Gegensatz zu meinem onMouseover-Beispielen, bei denen ich das kleine Bild direkt in NOF aufgezogen wird, habe ich hier den gesamten Befehl direkt in den HTML-Code Editor eines Textfeldes kopiert, da NOF einen Dateilink, den man mit onMousover versieht, immer gleich groß darstellen wird.

> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlerer Button oben “Text” > Button “HTML” > Code einfügen

ohne Link:

<img onmouseover="(src='./peonie.jpg')" onmouseout="(src='./peonie-thumb.jpg')" src="./peonie-thumb.jpg" alt="Peonie" title="Peonie" border="0">

mit Link - hier mit dem zusätzlichen Ziel “_blank” (was Ihr natürlich weglassen könnt, also hier als neues Fenster):

<a href="http://www.tommyherrmanndesign.com/nof/mouseover/" target="_blank"><img onmouseover="(src='peonie.jpg')" onmouseout="(src='peonie-thumb.jpg')" src="peonie-thumb.jpg" alt="Klick zu mehr Mouseover-Beispielen" title="Klick zu mehr Mouseover-Beispielen" border="0"></a>

Natürlich müsst Ihr Euch zunächst das Thumbnail (kleine Foto) erstellen und auch dann beide Fotos in die “Assets-Verwaltung” von NOF einlesen, damit NOF diese Fotos überhaupt kennt, man auf diese verlinken kann und sie sogleich auch von NOF mit publiziert werden.

Bei den Pfadangaben zu den Fotos müsst Ihr die relative Pfadangabe anpassen, also z.B.:

src='./peonie.jpg'

mit einem Punkt ./ oder keinem Punkt bedeutet = “bleibe im gleichen Verzeichnis”, da bei mir diese Bilder im Stammverzeichnis liegen, also in dem gleichen Verzeichnis wie meine Startseite “index.html”, da ich “Nach Site-Stuktur” publiziert habe.

Solltet Ihr z.B. “Nach Asset-Typ” publizieren - dann würde NOF, die in der Assets-Verwaltung eingelesenen Bilder, in das Verzeichnis

/assets/images/

publizieren. Dementsprechend wäre die relative Pfadangabe dann von der Startseite zu einem Bild:

src='./assets/images/peonie.jpg'

und von einer Unterseite dann mit zwei Punkten ../ anzugeben (gehe ein Verzeichnis höher):

src='../assets/images/peonie.jpg'

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik