Fade In Effekt
0 0 0 0
0 0 
Felix Riesterer
Fade In Effekt
Hallöchen!
Also ich habe vor, wenn man mit dem Cursor auf ein Bild klickt, soll eine kleine Lupe auf dem Bild erscheinen und somit dem Betrachter demonstrieren, dass dieses Bild die Möglichkeit bietet, vergrößert zu werden.
Ein Beispiel wären die Bilder auf Focus.de
Dort ist gleich eine ausgebleichte Lupe zu sehen, welche sich dann in Farbe und Funktion beim Mouseover zeigt.
Kann mir jemand erklären, wie ich diesen Fade In Effekt auf ein Bild legen kann?
Danke im Vorraus.
MfG
-
<img src="bild" style="cursor:url(lupe.gif)">
-
Danke für die rasche Antwort.
Aber das alleine kann doch nicht genügen oder?
<img src="bild" style="cursor:url(lupe.gif)">Es passiert auf jeden Fall mal nichts!
Kannst du genauer erläutern?
MfG
-
Hallo,
<img src="bild" style="cursor:url(lupe.gif)">Bei dieser Möglichkeit verwandelt sich der Mauszeiger selbst in eine Lupe (vorausgesetzt du hast eine passende Datei lupe.gif im Verzeichnis der html-Datei)
Gruß,
Fay
-
Hier hab ich eine JS Lösung gefunden, werden aber bloß die Standardpics von Windows angezeigt.
<img src="bild1.png" border="1" onmouseover="this.style.cursor = 'wait'" >
-
Hallo Händler
Hier hab ich eine JS Lösung gefunden, werden aber bloß die Standardpics von Windows angezeigt.
<img src="bild1.png" border="1" onmouseover="this.style.cursor = 'wait'" >
Dafür ist kein Javascript erforderlich, es reicht CSS.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Lieber Detlef,
<img src="bild1.png" border="1" onmouseover="this.style.cursor = 'wait'" >
im Grunde hast Du Recht, jedoch wäre der Aufwand hier tatsächlich größer: Der OP müsste zuerst eine Klasse oder ID vergeben, und diese dann in seinem CSS-Code mit einer entsprechenden Regel versehen. Diese JavaScript-Notation ist deutlich knapper und leichter umgesetzt - dass sie dann aber unter Umständen nicht immer funktioniert, steht auf einem anderen Blatt.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi,
im Grunde hast Du Recht, jedoch wäre der Aufwand hier tatsächlich größer: Der OP müsste zuerst eine Klasse oder ID vergeben, und diese dann in seinem CSS-Code mit einer entsprechenden Regel versehen. Diese JavaScript-Notation ist deutlich knapper und leichter umgesetzt - dass sie dann aber unter Umständen nicht immer funktioniert, steht auf einem anderen Blatt.
Also ich finde
onmouseover="this.style.cursor='wait'"nicht kürzer alsstyle="cursor:wait;".Aber Wartungsfreundlicher ist es, wenn man eine Klasse vergibt.
Ausserdem will der OP wohl eh nicht den Cursor in Lupenform haben, sondern nur das Bild einer Lupe am unteren Rand des Bildes anzeigen.
mfG,
steckl -
Hallo Felix
<img src="bild1.png" border="1" onmouseover="this.style.cursor = 'wait'" >
im Grunde hast Du Recht, jedoch wäre der Aufwand hier tatsächlich größer: Der OP müsste zuerst eine Klasse oder ID vergeben, und diese dann in seinem CSS-Code mit einer entsprechenden Regel versehen. Diese JavaScript-Notation ist deutlich knapper und leichter umgesetzt - dass sie dann aber unter Umständen nicht immer funktioniert, steht auf einem anderen Blatt.
Meinst du wirklich?
<img src="bild1.png" border="1" style="[code lang=css]cursor:wait;">[/code]Die Javascriptvariante wäre knapper und leichter?
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-
Hallo,
Ein Beispiel wären die Bilder auf Focus.de
Dort ist gleich eine ausgebleichte Lupe zu sehen, welche sich dann in Farbe und Funktion beim Mouseover zeigt.
Da hast du ja eigendlich deine Antwort schon, du musst einfach einen mouseover-Effekt für das Bild hinzufügen, welches dann die Lupe (ist ein eigenes Bild) verändert.
Kann mir jemand erklären, wie ich diesen Fade In Effekt auf ein Bild legen kann?
Fade in ist bei deinem Beispiel nicht zu erkennen. Die Lupe schaltet von grau direkt auf die farbige Variante um.
Fade in bedeutet das es einen schrittwesen Übergang bietet.Du musst einfach zwei img-Element erstellen welche absolut über dem Bild positioniert werden, diesen solltest du zum einfacheren Zugriff auch noch eine id zuweisen.
Das farbige Bild muss ausserdem am Anfang unsichtbar sein (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility@title=visibility).
Jetzt musst du nur noch die graue Version unsichtbar machen und die farbige Version anzeigen wenn du mit dem mauszeiger auf das bild zeigst (mousein) und umgekehrt die farbige verschwinden lassen und die graue anzeigen wenn du das bild verlässt (mouseout).Danke im Vorraus.
Immer gerne :)
Gruß,
Fay
-
Liebes Trübes Glas,
wenn Du Dich mit Fader-Effekten beschäftigen möchtest, dann kann ich Dir meinen Artikel empfehlen, der dieses Problem behandelt. Dabei kommt sowohl CSS, als auch JavaScript zur Sprache (der Artikel ist in allererster Linie für JavaScript).
Demnächst isser in den SELFHTML-Artikeln hier, momentan hoste ich die aktuelle Arbeitsversion bei mir: Fader-Framework.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)