Schild animieren

[codyallen]

Ich möchte eine Webseite bauen und würde gerne
dieses Pappschild:


...so einbauen, das wenn man mit der Maus drüber fährt,
irgendeinen witzigen Effekt macht. Wackeln z.b
Geht so etwas überhaupt in Dreamweaver?
Danke

 

[DE_Nemesis_TM]

AW: Schild animieren

mit css3 wär so was drinnen:
bild als Hintergrund für ein a-Element

a{background: url(zettel.jpg) no-repeat top left; width: ...px; height: ...px;}
a:hover{-webkit-transform:rotate(5deg);
/*analog auch für khtml(zum Teil mobile-browser), moz(firefox) und o(opera) machen
Achtung: nicht css2.1 valide, da dies (noch) proprietäre styles sind*/
}

 

[MrAzrael]

AW: Schild animieren

Geht so etwas überhaupt in Dreamweaver? <-- da geht alles, es kommt nur auf die Sprache an

also Spontan würde mir da Javascript einfallen, das bei einem MouseOver das Bild gegen ein animiertes .gif austauscht welches dann wackelt ...

allerdings nur als fixe Idee und ungetestet bzgl. Umsetzung ... aber möglich müsste es sein

 

[freejay]

AW: Schild animieren

Du kannst einfach mit der pseudoklasse ':hover' arbeiten.

Erstelle dir von deinem image zwei bilder: das statische und ein zweites als animiertes gif. Du packst es in ein div und wählst das statische als background-image fürs div. Dann legst du fest 'divklasse:hover' und gibst hier als background-image nun das animierte gif mit dem wackel-effekt an (das du natürlich vorher in einem einfachen grafikprogramm erstellen musst, ist aber simpel!).

Probleme: das gif(256 farben) sieht u.u. nicht ganz so prickelnd aus, aber müsste noch im rahmen sein, der IE6 kann allerdings nur auf links (<a href> hovern [a:hover].

Lösung: Erstelle statt einem div ein <a href="#">, dem gibst du dann display:block und machst es mit dem background image genauso wie mit dem div oben erklärt. Zusätzlich sagst du dann cursor:default.

 

[dragobert]

AW: Schild animieren

"Geht so etwas überhaupt in Dreamweaver? <-- da geht alles, es kommt nur auf die Sprache an..."

Dreamweaver macht so etwas überhaupt nicht.
Er erstellt bestenfalls CSS oder Javascriptcode, der dann vom Browser interpretiert wird.

Den Rest hat freejay sehr gut erklärt.