Highlight auf z.B. ein DIV-Block

[Der_Johnny]

Auf der Webseite Helping People*|*Hillsong My Church werden einzelne DIV-Elemente der Seite mittels Javascript kurz hervorgehoben, wenn man auf die Links in dem weißen Navigationskasten klickt. Das finde ich sehr ansprechend und würde das gerne für eine eigene Seite anwenden.

Nun bin ich im ersten Step hingegangen und habe mir die Javascript-Dateien runtergeladen und genauso eingebettet, wie auf dieser Webseite. Das hat aber nicht funktioniert. Erst als ich direkt auf die Javascript-Dateien von o.g. Webseite verlinkt habe, hat dieses "Highlight" funktioniert. Der Sinn dahinter erschließt sich mir nicht.

Aber da es mir im Prinzip nicht darum geht, etwas zu kopieren, wollte ich fragen, wie man so eine Hervorhebung scripttechnisch umsetzt.

 

[_Thor_]

Du meinst die Navigationsleiste?

Das sind keine div-Elemente (wäre auch falsch), das ist eine Liste, deren Listenelemente einen Link enthalten, der per CSS beim hover hervorgehoben wird.

a {color: red;}
a:hover {color: green;}

 

[Der_Johnny]

Äh, nein. Ich meinte die DIV-Elemtente rechts neben der Navigationsbox. Beim Klicken auf einen Link IN der Navigationsbox werden diese nämlich per Javascript kurz hervorgehoben.

 

[_Thor_]

Ah, jetzt seh ich, was du meinst.

Soweit ich das auf die Schnelle sehen kann, ist das eine Funktion aus dem Script scriptaculous.js.

Selber schreiben kannst du es z.B. indem du das onclick-event auf dem Link abfängst und dann dem Hintergrund des jeweiligen Elements eine neue Hintergrundfarbe gibst. Diese gleichst du dann in einer Schleife immer weiter dem umgebenden Hintergrund an.

 

[Der_Johnny]

Kannst Du mir vielleicht zeigen, wie man das macht? Ich bin nämlich ein Javascript-Noob. :grin:

 

[Der_Johnny]

Hat sich erledigt. Ich musste mir das komplette Scriptaculous-Paket holen. Damit fluppt es... :)