Bild 2

 

Ausgangszustand


ein Klick auf den Link "Bild 1" führt zu weiteren sehenswerten afrikanischen Impressionen

 

 

Beschreibung

Ein mouseover für Text kann mit einem kleinen Trick erreicht werden ... das Textfeld in Netobjects Fusion wird mit einem div-Container umgeben, der das Handling übernimmt. Dazu wird im Text-HTML “Vor dem Tag” der div-Code eingegeben; “Nach dem Tag” wird er wieder geschlossen:

vor: <div id="meinText1" onmouseover="africachange.src='./assets/images/africacomplete.gif';">

nach: </div>

africachange ist der Name des Bild-Platzhalters, der unter Bild-Eigenschaften / HTML beim Platzhalter “Im Tag” definiert wird:

name=”africachange”

Der Pfad gibt an, wo das auszutauschende Bild zu finden ist (üblicherweise im /images-Verzeichnis). Da die Wechselbilder selbst nicht auf der Seite eingefügt werden, müssen sie ggf. manuell in das Verzeichnis kopiert werden. Alternativ dazu können sie auch als Assets mit der Option “immer publizieren” angelegt werden.

Die Definition muss für jeden Text extra gemacht werden.

Im Beispiel wird das Ursprungsbild nicht automatisch wiederhergestellt, wenn der Cursor den Text (bzw. genauer gesagt den div-Container) wieder verlässt. Das kann erreicht werden, wenn zusätzlich zum onmouseover noch ein onmouseout definiert wird:

<div id="meinText1" onmouseover="africachange.src='./assets/images/africacomplete.gif';"
onmouseover="africachange.src='./assets/images/africatransparent.gif';">

Die Texte selbst können weiterhin normal verlinkt werden (wie bei dem Text “Bild 1”).

 


weitere Tutorials | Hotspot
 


orangepointsolutions.com
Bildnachweis: pixelio.de - Endlose Weite @ ulla, Stolzer Massai @ Ulla Trampert
pixxdoor.de - ausgezeichnetes Online Marketing
Kontakt
Impressum