animiertes Menü (siehe Bsp.)

[lormeltom]

Hallo Community,...

...kann mir jemand sagen mit wie solche Menü-Effekte beim
Mouseover "gebastelt" werden

---> The Official Simon's Cat Website <---

(wenn man mit der Maus über die einzelnen Menüpunkte fährt, dann
taucht darüber die Katze auf...)

wie wird sowas gemacht ?
(ich meine nicht die Katze, sondern den Effekt)

mit einem *.gif als mouseover-content ?
oder Flash ?
oder wie ?

(ich bin nicht der Meister im Quellcode-Lesen...)

Danke für evtl. Tipps... =)
lormeltom.

 

[fexx]

AW: animiertes Menü (siehe Bsp.)

das ist eine mischung aus css und 2 gif bildern:

- normal state: background image a
- hover state: background image b

http://www.simonscat.com/navgraphics/gallery_A.gif
http://www.simonscat.com/navgraphics/gallery_B.gif

#gallery { background: url(http://www.simonscat.com/navgraphics/gallery_A.gif) left top no-repeat; }

#gallery:hover { background: url(http://www.simonscat.com/navgraphics/gallery_B.gif) left top no-repeat; }

 

[fairyofdarkness]

AW: animiertes Menü (siehe Bsp.)

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
Mouseover-Buttons und -Effekte mit CSS
es kann dir helfen

 

[kalifrago]

AW: animiertes Menü (siehe Bsp.)

na fexx hats ja schon erklärt, brauch ich nix mehr sagen, aber ich muss jetzt mal los werden, dass die idee mit dieser katze total geil ist

 

[fexx]

AW: animiertes Menü (siehe Bsp.)

na fexx hats ja schon erklärt, brauch ich nix mehr sagen, aber ich muss jetzt mal los werden, dass die idee mit dieser katze total geil ist

*zustimm* ja, sehr geile idee

 

[photospace]

AW: animiertes Menü (siehe Bsp.)

das muss ich auch sagen echt witzig, das werde ich mahl auch so ausprobieren, nur eben mit meinen Bildern.

 

[owieortho]

AW: animiertes Menü (siehe Bsp.)

Die Quelltext für zum Beispiel den "Home"-Link:

<div class="home"><a id="home" href="index.html"></a></div>

dazu die korrespondierende CSS-Anweisung:

#home 
 {
 ...
 background: url("../navgraphics/home_A.gif") no-repeat 0 0;
 }
 
#home:hover
 {
...
 background: url("../navgraphics/home_B.gif") no-repeat 0 0;
 }

So, da hast Du nun einen Hover-Effekt zwischen zwei GIFs, das zweite ein animiertes.