Bilder aufhellen beim drüberfahren

[deluxe-striker]

hiho

wie kann ich Bilder aufhellen, wenn ich mit der Maus drüberfahre?
D.h. das Bild ist (relativ) dunkel, und wenn ich mit der Maus drüberfahre, wird es normal, also heller.
Das ganze will ich auf einer Homepage einbinden.

Danke

cu

 

[~SpArGs~]

Möchtest du das Bild flüssig faden, sprich ohne Stufungen dazuwischen
heller machen, oder einfach ein dunkles beim drüberfahren gegen ein
helles austauschen?

Beides geht eher Richtung HTML/DHTML, als Photoshop :-]

 

[subzero]

Original geschrieben von ~SpArGs~
Beides geht eher Richtung HTML/DHTML, als Photoshop :-]

*hehe*
Es ist genau so etwas. Such mal in diesem Forum: http://www.tutorials.de/forum22

 

[deluxe-striker]

jo, jetzt hab ich meine Thread hier gefunden

Aber kann mir vielleicht doch jemand sagen, wie ich das mache?
Also das ganze soll ein dunkles Bild beim drüberfahren heller machen, am besten per fade, wie schon obern erwähnt

Danke

cu

 

[Markus Kolletzky]

Hi,

Hab Dir mal dazu was rausgesucht, dürfte aber in der Suchfunktion auch irgendwo zu finden sein (Sucbegriff Fadingeffekt)

Du erstellst eine datei imgfade.js

In diese Schreibst du das hier rein:

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

/* object - image to be faded (actual object, not name);
 * destop - destination transparency level (ie 80, for mostly solid)
 * rate   - time in milliseconds between trasparency changes (best under 100)
 * delta  - amount of change each time (ie 5, for 5% change in transparency)
 */

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}

in Deine Seite baust du das hier in den head tag ein:

<SCRIPT language=JavaScript src="imgfade.js"
type=text/javascript></SCRIPT>

und die Images sehen dann so aus:

<IMG src="http://www.url/zudeinembild.gif" alt="Alt-text" width=Breite height=Höhe border=0 style="FILTER: alpha(opacity='45')" onmouseover=nereidFade(this,100,10,10) onmouseout=nereidFade(this,45,10,10)>

Ist zwar nicht die einfachste Methode, aber versuch, mit den Werten rumzuspielen, dann erhälst Du einen netten Fade-Effekt.
Ach ja, was noch wichtig zu erwähnen wäre, dieser Effekt funktioniert nur mit dem IE ab 5.5 (?)

mfG ALF

 

[deluxe-striker]

gibt es auch noch andere möglichkeiten?

 

[Gottox]

Die Microsoft-Filter:
http://selfhtml.teamone.de/css/eigenschaften/filter.htm

 

[Needa]

Wenn ich das mal anwende, dann auch mit der Filter:alpha-Methode.. was man zuerst lernt, macht man sein Leben lang.. deswegen denke ich auch immernoch, die Hypotenuse ist die längste Seite am Dreieck und nicht die Gegenseite zum rechten Winkel :/