✔ Bild aufhellen

[Psychodelics]

Hi,

ich würde gerne auf meiner Seite ein Bild beim drüber rollen mit der Maus hervorheben, in dem ich die Helligkeit erhöhe.
Die Idee war im Prinzip, dass das Bild von vornherein abgedunkelt ist und bei drüberfahen seine Originalfarben bekommt.

Alternativ könnte ich zwei Bilder laden, ein dunkles und ein helles, aber die Idee ist nicht sehr elegant, muss ich sagen.

Kan mir da jemand bei helfen? Mir würde schon der name von dem Effekt reichen.

Gruß, Adnan

 

[rd4eva]

Eigentlich mehr eine CSS als JS Frage.

Du könntest es mit CSS-Transparenz versuchen :
http://tobias-otte.de/essays/css-transparenz/

Dein Bild müsste dann eben bei z.B. 50% Transparenz starten und beim hover auf 100% gehen.

Hier nochmal im Prinzip das gleiche nur mit JQuery
http://docs.jquery.com/Effects/fadeTo#speedopacitycallback

Ansonsten bliebe noch die Möglichkeit von CSS Sprites. (Wobei ich das nicht für Sinnvoll halte in deinem Fall)
http://css-tricks.com/css-sprites/

 

[Psychodelics]

Hi rd4eva,

danke auf jeden Fall für die Tipps. Die Idee mit der Transparenz ist gut, aber ich sehe gerade, dass es noch nicht von allen Browsern unterstützt wird.

Ich greife dann zu einer CSS-variante, wo das Bild beim RollOver verschoben wird. In das Bild mache ich dann direkt beide Versionen rein, hell und dunkel und man sieht dann immer nur einen Ausschnitt.

Diese Variante wollte ich eingetlich vermeiden, da dadurch die Seite um 2ookb größer wird, aber na gut, was soll's..

Gruß, Adnan

 

[Sven Mintel]

Die Idee mit der Transparenz ist gut, aber ich sehe gerade, dass es noch nicht von allen Browsern unterstützt wird.

Mir ist kein halbwegs aktueller Browser bekannt, der das nicht kann.

 

[Psychodelics]

* Funktioniert bei geschätzten 25% der Besucher

So steht es auf der Website. Der Beitrag ist aber scheinbar schon 2 Jahre alt. Hmm... Ich find die Idee mit den Sprites halt gut. So mache ich das auch immer mit meinen Navigationsleisten, nur in diesem Fall sind die Bilder was größer.

Also meint ihr, ich kann ohne Bedenken die Technik anwenden mit der Transparenz anwenden? Das wäre für mich auch angehmer, wegen der Größe der Seite, nur da stand, das zum Beispiel der IE das nicht unterstützt...


Gruß, Adnan

 

[Sven Mintel]

Die 25% beziehen sich auf die CSS-Eigenschaft "opacity"

Wenn du eine Kombination von opacity und dem MS-Alpha-Filter verwendest, solltest du weitestgehend alles abdecken, wenn du zusätzlich noch -moz-opacity nimmst, hättest du auch Update-resistente FF-User im Boot

Beispiel:

#selector{
  filter: Alpha(opacity=80);
  opacity:0.8;
  -moz-opacity:0.8;
}

 

[Psychodelics]

Gut danke Sven,

so werd ich das dann machen. Jetzt muss ich nur noch hoffen, dass es nachher auch gut aussieht ^^

Gruß, Adnan

 

[Psychodelics]

Ich habe es mit der Transparenz und dem "Background-Verschieben" probiert. Alle Varianten lassen meinen IE 8 kalt.

Was mach ich denn falsch?

Gruß, Adnan

Hier mein Code:

img.beleuchten{
filter: Alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
}

img.beleuchten:hover{
filter: Alpha(opacity=100);
opacity:1;
-moz-opacity:1;
}

EDIT: Korrektur, das mit dem Background verschieben funktioniert, nur dafür muss ich jedes Bild doppelt haben und dann wird mir das zu groß.

 

[Maik]

Hi,

Ich habe es mit der Transparenz und dem "Background-Verschieben" probiert. Alle Varianten lassen meinen IE 8 kalt.

Was mach ich denn falsch?

Gruß, Adnan

Hier mein Code:

img.beleuchten{
filter: Alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
}

img.beleuchten:hover{
filter: Alpha(opacity=100);
opacity:1;
-moz-opacity:1;
}

Vermutlich übergibst du den Browsern dein HTML-Dokument ohne bzw. mit dem falschen Doctype nicht im standardkonformen Modus, womit sie im "Quirksmodus" laufen, und in diesem Darstellungsmodus unterstützt der aktuelle IE8, wie schon der IE6 aus vergangenen Zeiten, die :hover-Pseudoklasse ausschließlich für das <a>-Element. Du wendest sie aber auf das <img>-Element an.

In meiner Testseite nimmt der IE8 das Stylesheet wie gewünscht an.

mfg Maik

 

[Psychodelics]

Na super. Ich hatte die DOC-Type leer gelassen

Das war genau der Grund. Jetzt funktioniert es auch beim IE.

Danke ^^