Fading Picture mit Link

von Pinoy | 07.12.2007 um 20:37 h

Typ: Javascript Anwendungen
Stufe:Einfach

Hey

Das hier ist mein erstes Tutorial für Giatu.
Hier erkläre ich euch, wie man ein Fading Picture mit Link macht Smilie

Ok, fangen wir an . Die meisten von euch wissen bestimmt, was ein Fading Picture ist oder ? Die, die es nicht wissen; hier ist ein Beispiel:
http://pinata.redio.de/tutorials/fadingpicture.html

Wichtig!:
geht leider nur im IE

Zuerst fügst du diesen Code in den <head>-Bereich ein:

 

<script>

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]"){  //do this so I can take a string too

        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);

    }

}



</script>

Und diesen Code fügt ihr dort ein wo ihr euer "Normales" Fading Picture haben wollt :



textarea readonly cols="18" rows="4">

<img src="DEIN BILD URL" style="filter:alpha(opacity=40)" onmouseover="nereidFade(this,100,70,20)" onmouseout="nereidFade(this,20,50,10)">

</textarea>

aber ihr wollt ein Fading Picture mit Link? Dann fügt diesen code ein:



<a href="DEINE SEITE" target="_blank"><img src="DEIN BILD" style="filter:alpha(opacity=40)" onmouseover="nereidFade(this,100,70,20)" onmouseout="nereidFade(this,20,50,10)" border="0"></a>

Das wars

Ich hoffe, ihr habt alles verstanden . Ciao