Huhu

dies ist mein allererster Tutorial für Giatu Aber achtung! Ich bin etwas schlecht, wenn ich was erkläre Und meine Grammatik ist auch am A.... xD Ich hoffe ihr verstehts trotzdem ;D

ALSO... Mein Weg ist eigendlich ziemlich einfach den Gradualfader zu benutzen
Man kann es für verschiedene Sachen benutzen meiner Meinung nach ist es am besten geeignet wenn man z.B. Affibuttons oder so im Layout hat. Die Bilder nerven dann nicht mehr im nachhinein

Wichtig!:

ES IST IM IE UND FF SICHTBAR!!

Hab ich selber vorhher getestet!
Verwendet es lieber in einem PHP Layout!

Nun zum Tut.!

Öffnet z.B. euere Index Datei
1. Dann MUSS im Head Bereich dies stehen!

<style type="text/css"> .gradualshine{ filter:alpha(opacity=30); -moz-opacity:0.3; } </style>

bei filter: alpha (opacy=30); ->damit könnt ihr die Sichtbarkeit einstellen! Ich empfehle 30, es sieht meiner Meinung nach am besten aus ˆˆ

2. Als nächstes müsst ihr dies hier unter dem anderen Code einfuegen. (Es befindet sich auch im Head bereich!)


<script type="text/javascript">

/***********************************************
* Gradual Highlight image script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script>


daran muss man gar nichts ändern! Also würd ich es lieber lassen xD

3. Als nächstes kommen die Bilder! Ihr könnt sie Einfügen wo ihr wollt, blos es sollte im Bodybereich sein!
Beispiel als Link

<a target="_blank" href="http://www.link.de/">
<img src="image.png" border=0 class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"></a>


Normales Bild ohne Link als bsp.

<img src="image.png" border=0 class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)">


Wichtig!:

Ach, bevor ich es vergesse! bei -> onMouseover="slowhigh(this)"
und -> onMouseout="slowlow(this)"

könnt ihr es auch umgekehrt machenˆˆ

statt:
onMouseover="slowhigh(this)"
könnt ihr das machen
onMouseover="slowlow(this)"

und

statt:
onMouseout="slowlow(this)"
könnt ihr das machen
onMouseout="slowhigh(this)"

dann ist das Bild normal und wenn man drüber geht, wirds durchsichtig! ˆˆ

Ergebnis seht ihr auf meiner HP hab nähmlich alles genauso benutzt wie es oben steht.

dass wars dann >.< ich hoffe dass es nicht all zu schlecht ist >.< nicht so streng sein o__o Kritik schadet aba trotzdem nie :′D

cucu
Rei-sama <3

bei Fragen wendet euch an mich

(Jo hab ich von dynamicdrive :′D, doch die haben es viel zu kompliziert erklärt!)