GIFs faden?

[hugo]

Hi Leute nochmal! ;)

Ich habe ein Menu, das aus gelben Textlinks besteht. Links neben jedem Textlink ist ein blauer Punkt, als Aufwählungspunkt sozusagen. Durch JavaScript werden die gelben Textlinks beim Draufzeigen mit dem Cursor (hover) in blau gefadet.

Jetzt meine Frage: Kann ich es irgendwie einrichten, dass die blauen Punkte (GIF-Datei) beim Draufzeigen mit dem Cursor auf den Textlink (hover) in gelbe Punkte (die ich als weitere Grafik erstellt habe) gefadet werden? Das wäre natürlich echt super, wenn das ohne Flash bewerkstelligt werden könnte.

Als Alternative, falls das nicht geht, wäre es echt nett, wenn ihr mir erklären würdet, wie ich einstellen kann, dass (wenigstens) die gelben Punkte beim Draufzeigen mit dem Cursor (hover) durch die blauen Punkte ersetzt werden. (Sobald man mit dem Cursor woanders hingeht, sollen die gelben Punkte wieder angezeigt werden.)

Vielen Dank schonmal.

Lieben Grüße,

Hugo

[at]

Hallo.

Jetzt meine Frage: Kann ich es irgendwie einrichten, dass die blauen Punkte (GIF-Datei) beim Draufzeigen mit dem Cursor auf den Textlink (hover) in gelbe Punkte (die ich als weitere Grafik erstellt habe) gefadet werden? Das wäre natürlich echt super, wenn das ohne Flash bewerkstelligt werden könnte.

Benutze GIF-Animationen.
MfG, at

[Jeena Paradies]

Hallo,

Benutze GIF-Animationen.

Hä wie denn das? Wie soll das mit Animationen bewerkstelligt werden? Das ist doch einfach nur eine hover Sache oder nicht? Oder habe ich das falsch verstanden? Also ich verstehe das so:

| Link1 <img src="http://www.jeenaparadies.de/intlink.png" border="0" alt=""> | Link2 <img src="http://www.jeenaparadies.de/intlink.png" border="0" alt=""> | Link3 <img src="http://www.jeenaparadies.de/intlink.png" border="0" alt=""> | Link4 <img src="http://www.jeenaparadies.de/intlink.png" border="0" alt=""> |

Und das Bildchen soll bei hover geändert werden. Ist das richtig so?

Dann würde ich das Bildchen per CSS als Hintergrundbild einfügen, ganz rechts anordnen, und ein Padding welches ein paar pixel größer als das Bildchen selbst ist nach rechts machen.

Mit dem Pseudoformat :hover würde ich dann das Hintergrundbild auswechseln. Das müsste in so ziemlich allen nicht ganz so uralten Browsern funktionieren.

Grüße
Jeena Paradies

[at]

Hallo.

Hä wie denn das?

Genau so wie du es beschrieben hast. Aber die Bilder, die du für "a:link" und "a:hover" einsetzt, können eben auch GIF-Animationen sein, so dass ein Fade-Effekt entsteht, wenn das Startbild des "a:link"-Hintergrundbildes und das Endbild des "a:hover"-Hintergrundbildes sowie das Endbild des "a:link"-Hintergrundbildes und das Startbild des "a:hover"-Hintergrundbildes jeweils einander identisch sind.
MfG, at

[Jeena Paradies]

Hallo,

Genau so wie du es beschrieben hast. Aber die Bilder, die du für "a:link" und "a:hover" einsetzt, können eben auch GIF-Animationen sein, so dass ein Fade-Effekt entsteht, wenn das Startbild des "a:link"-Hintergrundbildes und das Endbild des "a:hover"-Hintergrundbildes sowie das Endbild des "a:link"-Hintergrundbildes und das Startbild des "a:hover"-Hintergrundbildes jeweils einander identisch sind.

Aha interresante Theorie, muss ich mir merken.

Grüße
Jeena Paradies

[hugo]

Hallo Leute!

Erstmal vielen herzlichen Dank euch dreien für Eure Antworten.
Ich habe mir das auf /rutabagaland/ mal angesehen. Aber leider bin ich noch nicht so ganz durchgestiegen. Vor allem, was das mit den animierten GIFs zum Faden angeht.

Übrigens: Wie kann ich am besten (mit Photoshop, Fireworks, o.ä.) die Stelle des GIF transparent machen, an der die Hintergrundfarbe durchkommen soll? Also am besten wäre es, wenn ich irgendwie auf einem transparenten Layer den Aufzählungspunkt machen könnte, und das ganze dann sozusagen inverteiren. So dass alles Farbige transparent und alles Transparente farbig wird. Denn das "transparente Loch" im GIF-File soll ja auch nicht so kantig wirken, sondern es soll ein weicher Übergang drin sein. So dass also in der Mitte 100%ige Transparenz ist, aber am Rand des "transparenten Lochs" eben nur 80%ige oder so. Damit das halt so ineinander übergeht. Versteht ihr, was ich meine? Sorry, schwer zu erklären...

Gruß,

Hugo

[at]

Hallo.

Ich habe mir das auf /rutabagaland/ mal angesehen. Aber leider bin ich noch nicht so ganz durchgestiegen. Vor allem, was das mit den animierten GIFs zum Faden angeht.

Dies ist eine unzureichende Problembeschreibung.

Übrigens: Wie kann ich am besten (mit Photoshop, Fireworks, o.ä.) die Stelle des GIF transparent machen, an der die Hintergrundfarbe durchkommen soll?

http://www.google.de/search?q=rtfm&ie=UTF-8&oe=UTF-8&hl=de&btnG=Google+Suche

Also am besten wäre es, wenn ich irgendwie auf einem transparenten Layer den Aufzählungspunkt machen könnte, und das ganze dann sozusagen inverteiren. So dass alles Farbige transparent und alles Transparente farbig wird. Denn das "transparente Loch" im GIF-File soll ja auch nicht so kantig wirken, sondern es soll ein weicher Übergang drin sein. So dass also in der Mitte 100%ige Transparenz ist, aber am Rand des "transparenten Lochs" eben nur 80%ige oder so. Damit das halt so ineinander übergeht. Versteht ihr, was ich meine? Sorry, schwer zu erklären...

... und mit GIF nicht zu erreichen, da dieses Format nur genau eine Farbe und diese zu genau 100% transparent darstellen kann.
Es gibt aber unzählige Anleitungen im Netz, die dir Schritt für Schritt erklären, wie du dein Ziel dennoch erreichen kannst. Die Suchbegriffe solltest du in den bisherigen Beiträgen zusammensammeln können. Sollten später konkrete Schwierigkeiten auftreten, so wird dir hier gern weitergeholfen.
MfG, at

[Jeena Paradies]

Hallo,

Jetzt erst verstehe ich auch die Frage richtig.

Grüße
Jeena Paradies

[at]

Hallo.

Jetzt erst verstehe ich auch die Frage richtig.

Dies könnte auch zum Verständnis der Antwort beitragen ;-)
MfG, at

[Sven Rautenberg]

Moin!

Ich habe ein Menu, das aus gelben Textlinks besteht. Links neben jedem Textlink ist ein blauer Punkt, als Aufwählungspunkt sozusagen. Durch JavaScript werden die gelben Textlinks beim Draufzeigen mit dem Cursor (hover) in blau gefadet.

Jetzt meine Frage: Kann ich es irgendwie einrichten, dass die blauen Punkte (GIF-Datei) beim Draufzeigen mit dem Cursor auf den Textlink (hover) in gelbe Punkte (die ich als weitere Grafik erstellt habe) gefadet werden? Das wäre natürlich echt super, wenn das ohne Flash bewerkstelligt werden könnte.

Die Lösung für dein Problem ist z.B. unter http://www.megpalffy.org/rutabagaland/index.html ausgearbeitet.

Die Links am rechten Rand mit der Wurzel sind rein per CSS animiert. Die Wurzel selbst ist im Prinzip "invers", d.h. das gelbe oder braune der Wurzel ist im GIF transparent und ist in CSS als Hintergrundfarbe definiert. Diese wird mit :hover geändert.

Alle neuen Browser mit Ausnahme vom Opera 6 können den Effekt.

Und viele Grüße an Meg Palffy an dieser Stelle. :)

- Sven Rautenberg