#1 24. Januar 2010 Fade In - Beschreibung über Bild Guten tag, bin auf der Suche nach einem Script. Und zwar soll per "Fade In" eine kleine Beschreibung auf einem transparenten Hintergrund eingeblendet werden, sobald ich über das Bild mit der Maus gehe. Soll halt als kleines Showcase für ein Portfolio dienen, Bilder sollten auch verlinkt werden können,aber das ist ja kein Problem. Über google hab ich nichts gefunden, kann mir hier jemand weiterhelfen? + Multi-Zitat Zitieren
#2 25. Januar 2010 AW: Fade In - Beschreibung über Bild http://demos.mootools.net/Effects anstatt auf ein click event, setzt du einfach ein mouseover event. ist recht einfach + Multi-Zitat Zitieren
#3 25. Januar 2010 AW: Fade In - Beschreibung über Bild Kann Mootools auch nur empfehlen, wenn das etwas striktere Coding auch nich jedermanns Sache ist, funktionierts meist etwas besser wie das chaining mit jquery auch wenns gehyped wird ohne Ende + Multi-Zitat Zitieren
#4 25. Januar 2010 AW: Fade In - Beschreibung über Bild Falls du kein Framework benutzt und weiterhin keins benutzen willst, gibt es das auch einfache als Funktion. Du kannst sie dir auch aus den Frameworks "klauen" oder sowas nutzen. Ist recht simpel. Die opacity wird einfach via Timeout langsam runtergefahren oder hochgefahren. Das Script nervt nochnichtmal so rum wie Scriptaculous appear und fade effekt. + Multi-Zitat Zitieren
#5 25. Januar 2010 AW: Fade In - Beschreibung über Bild ich versteh ned warum manche leute für solche sachen immer timeouts nehmen. HTML: <html> <head> <script type="text/javascript"> var ie = window.attachEvent && !window.opera; var setop = (ie ? function(e, op) { o = parseInt(op * 100); if(o == 100) { try { e.style.removeAttribute("filter"); e.style.removeAttribute("-ms-filter"); } catch(e) { //ignore } finally { return; } } var cs = e.currentStyle; if((cs && !cs.hasLayout) || (!cs && e.style.zoom == 'normal')) e.style.zoom = 1; e.style["-ms-filter"] = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + o + ")" e.style.filter = 'alpha(opacity=' + o + ')'; } : function(e, op) { e.style["-moz-opacity"] = op; e.style.opacity = op; }); function fade(e) { var e = document.getElementById(e); var o = 1.0; var i = window.setInterval(function() { if((o -= .1) <= 0.1) { e.style.display = "none"; setop(e, 0); window.clearInterval(i); return; } setop(e, o); }, 60); } function appear(e) { var e = document.getElementById(e); var o = .0; setop(e, o); e.style.display = ""; var i = window.setInterval(function() { if((o += .1) >= 0.9) { setop(e, 1); window.clearInterval(i); return; } setop(e, o); }, 60); } function toggle(e) { var el = document.getElementById(e); if(el.style.display == "none") appear(e); else fade(e); } </script> </head> <body> <p style="border:4px solid #b00000;padding:10px;" id="fade_element">Fade me</p> <p><a onclick="toggle('fade_element'); return false;" href="#">do it!</a></p> </body> </html> + Multi-Zitat Zitieren
#6 26. Januar 2010 AW: Fade In - Beschreibung über Bild Ich glaub die meisten wissen wohl gar nicht, dass es auch was anderes außer den Timeouts gibt (kein Wunder wenn man sich nicht mal bisschen durchliest^^) oder haben absolut keine Ahnung wo der Unterschied liegt. Das was ich gefunden hatte, war nur das einzige was so auf anhieb beim Suchen funktionierte. + Multi-Zitat Zitieren