+- net-board.net Archiv (https://net-board.net)
+-- Forum: Deine eigene Homepage (https://net-board.net/forumdisplay.php?fid=26)
+--- Forum: Scriptsprachen (+Datenbanksysteme) (https://net-board.net/forumdisplay.php?fid=19)
+---- Forum: Tutorials und Artikel: Programmieren und Datenbanken (https://net-board.net/forumdisplay.php?fid=15)
+---- Thema: [JAVA-SCRIPT] Grafik Fader (/showthread.php?tid=2011)
[JAVA-SCRIPT] Grafik Fader - Zerogiven - 08.07.2003
Also damit ihr Effekte erzielen könnt wie hier: LINK
Braucht ihr nur ein bisschen JavaScript und CSS.
Als erstes fügt ihr diesen Teil in den Header Bereich ein:
Code:
<script language="JavaScript">
bannerObjects = new Object();
bannerTimers = new Object();
function banner(object, destOp, rate, delta) {
if (!document.all)
return
if (object != "[object]") {
setTimeout("banner("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(bannerTimers[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) {
bannerObjects[object.sourceIndex]=object;
bannerTimers[object.sourceIndex]=setTimeout("banner(bannerObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</script>Dieses Script könnt ihr so lassen, hier braucht ihr gar nichts ändern.
Die Ausgabe sieht dann so aus, wenn man ein Bild einfügen möchte:
Code:
<img src="http://www.deine-domain.de/bilder/bild1.jpg" onmouseover="banner(this,100,100,7)" style="FILTER: alpha(opacity=60)" onmouseout="banner(this,60,60,3)">Hier braucht ihr eigentlich auch nichts ändern, das einzige ist der Bildpfad. Ihr könnt euch dann noch ein bisschen mit den Zahlenwerten vom "onmouseover","style","onmouseout" spielen.
Viel Erfolg
mfg
Zerogiven
Copyright by Zerogiven
Mehr Tutorials: http://www.boldluck.at