"herausfahrende" JPGs

[ab12ton]

Hallo,

ich habe da eine Idee für die Gestaltung einer Website, und wollte - als Anfänger - mal die Frage stellen, womit sich das realisieren lässt. Noch in HTML, oder was man mindestens noch (beherrschen) braucht. Mir steht übrigens Dreamweaver und Go!Live zur Verfügung.

Es geht darum das man ein Bild sieht, aus dem andere Bilder herausgefahren werden. Wie ein Schrank, aus dem Schubladen heraus kommen. Man könnte das natürlich mittels GIF-Animation vielleicht lösen; aber ein Bild, das "unter" einem anderen herauskommt (vorher also verdeckt ist) würde wohl sehr viel schneller geladen.

Vielleicht gibt es auch Tutoriale dazu dann. "Bilder Bewegen in ..." was auch immer ;-)

Ich möchte gerne etwas machen, das so viel Leute wie möglich sehen können, auch wenn sie ein Modem besitzen und allen Schnickschnack in ihrem Browser ausgeschaltet haben. Sonst könnt ich auch Flash nehmen (da kenne ich mich dann auch wieder besser aus), aber Flash mag und hat nicht jeder.

Viele Grüsse und Danke für alle Hinweise im Voraus!

 

[Y05h1]

Das sollte mit java script möglich sein.
Ansonsten auch mit Flash aber das ist am ende wieder irgendwie gleich wie die Idee mit den gifs...

 

[ab12ton]

Hallo, Danke für Deine Antwort!

Hmm, aber Java Script haben doch auch nicht alle Leute, oder?
Ist nur damit Bewegung möglich? Oder gibt es etwas verbreiteteres.
Hmm, ich mache mich wohl gerade albern ;-)
Weiss ja nicht mal, was PHP ist ;-)

Wie es in Flash geht, weiss ich natürlich

 

[Tonda]

Hallo,

ich würde dazu CSS nehmen. Wobei zu beachten ist das der IE damit seine Probleme hat. Gib mal "hidden" in der CSS Boardsuche ein. Da sollten schon ein paar Beiträge zum Thema erscheinen.

Die Theorie ist die: Das Bild ist auf unsichtbar geschaltet und wenn die Maus über eine bestimmtes Element "fährt", wird das Bild sichtbar. Und genau mit diesen Rollover Effekten hat der IE seine Schwierigkeiten. Dazu gibt es aber Abhilfe (leider auch nur in Form von JS) Patch für IE von Dean Edwards .
Dann habe ich noch das Hover und CSS

So long
Tonda

 

[Inspector]

Hi,

mit dieser Art von rollover wirst Du aber das "Herausfahren" nicht realisieren können. Da wird das Bild einfach nur sichtbar.

Was Du machen kannst, aber das bedarf einiger Experimente speziell wg. IE, wäre folgendes: Du positionierst sämtliche beteiligten Bilder per position: wasauchimmer und legst die z-order fest. Dabei hat das Bild, das die anderen verdecken soll, die höchste z-order. Bei Klick kannst Du nun per JavaScript a) die z-order ändern und b) die Position animieren.

Eine weitere Möglichkeit, die z.Zt. gerade aktuell wird (ist aber wirklich Neuland!), das ist svg. Damit kannst Du so ziemlich genau das Gleiche machenb wie mit Flash. Auch alle möglichen Arten von Animationen. Ich selbst arbeite mich da grade ein, kann da also noch nicht all zu viele Hinweise geben.

Und eine Möglichkeit, die wohl allerdings noch Zukunft ist, wäre smil (schau mal beim w3c danach).

 

[ficler]

hi

also ich würde das mit flash machen... ist recht einfach und schnell zu machen.

erstellst beide Bilder als MC (MovieClip) und läßt das "einzublendende Bild" per Bewegungstween erscheinen (ersterFrame mit Alpha = 0 und letzter Frame mit Alpha = 100).

wenn man sich in flash ein bißchen auskennt ist das ne sache von max. 2 minuten sowas zu erstellen.

mfg