#1 8. Juli 2009 Frage bzgl. Bildershow Hallo, hab zufällig durch stumble http://www.fluxbrigade.com gefunden. Mir gefällt das mit dem Übergang recht gut und dass der Text oben da auch gleich mit wechselt. Ich hab rausgefunden dass das mit scriptaculous gemacht wird aber ich raff es nicht wie man dann das mit den bildern hinbekommt. Kann mir da jmd. helfen? bigD + Multi-Zitat Zitieren
#2 8. Juli 2009 AW: Frage bzgl. Bildershow das framework kenn ich nicht. könnte dir jedoch mootools empfehlen. hier das was du brauchst http://demos.mootools.net/Effects + Multi-Zitat Zitieren
#3 8. Juli 2009 AW: Frage bzgl. Bildershow Soweit war ich auch schon. Aber wie bekomm ich das hin dass der dann das andere Bild faden tut? + Multi-Zitat Zitieren
#4 9. Juli 2009 AW: Frage bzgl. Bildershow du hast ein div container indem deine bilder und texte stehen. einfach diesen container faden und alles was drin ist wird ein- ausgeblendet + Multi-Zitat Zitieren
#5 9. Juli 2009 AW: Frage bzgl. Bildershow Ne das weiß ich auch...es geht mir nur darum dass er das eine bild ausfadet und gleichzeitig dass andere einfadet! + Multi-Zitat Zitieren
#6 10. Juli 2009 AW: Frage bzgl. Bildershow du definierst ein element#1 mit nem bild als hintergrund dannach lädst du das andere bild vor (= element#2), positionierst es über element#1 * und stellst in nem interval langsam den opacity-wert höher bis er auf 1 (bzw. 100%) steht anschließend setzt du das bild als neuen hintergrund in element#1 und entfernst element#2 wenn du weitere bilder einfaden lassen willst, beginnst du einfach bei schritt no. 2 * entweder via javascript, oder direkt mit css + Multi-Zitat Zitieren
#7 10. Juli 2009 AW: Frage bzgl. Bildershow Kannst du mir 2. und 3. genauer erklären?!^^ Wie macht man das (also so is das auf der Seite) dass der immer den css-befehl visible:none verschiebt, also von bild zu bild bzw. div zu div? Das brauch ich dann bekomm ich das hin denke ich... + Multi-Zitat Zitieren
#8 11. Juli 2009 Zuletzt von einem Moderator bearbeitet: 14. April 2017 AW: Frage bzgl. Bildershow No File | xup.in HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de"> <head> <title>Fade IN/OUT</title> <style type="text/css"> #fadeElement { width: 435px; height: 326px; background-image: url('bild1.png'); } #fadeOverlay { position: relative; top: 0; left: 0; width: 500px; height: 250px; } #fadeElement, #fadeOverlay { background-position: top left; background-repeat: no-repeat; } </style> <script type="text/javascript"> // <![CDATA[ var images = ["bild2.png", "bild3.png", "bild1.png"]; var pointer = -1, element = overlay = null; function startFade() { var element = window.element || (window.element = document.getElementById("fadeElement")); var overlay = window.overlay || (window.overlay = document.getElementById("fadeOverlay")); var images = window.images; var pointer = window.pointer; if(++pointer >= images.length) pointer = 0; window.pointer = pointer; var img = document.createElement('img'); img.style.cssText = 'margin:0;padding:0;'; img.alt = 'bild nicht gefunden!'; img.src = images[pointer]; setOpacity(img, (opacity = 0)); overlay.appendChild(img); var i = window.setInterval(function() { if((opacity += 0.1) >= 1) { window.clearInterval(i); element.style.backgroundImage = 'url(' + images[pointer] + ')'; window.setTimeout(function() { overlay.removeChild(img); window.setTimeout(startFade, 2250); }, 250); return; } setOpacity(img, opacity); }, 60); } var IS_IE = !!(window.attachEvent && !window.opera); var IS_IE8 = (IS_IE && navigator.userAgent.indexOf('MSIE 8') > -1); function setOpacity(el, o) { if(IS_IE) { // die IE8 und IE regel sollten zusammen gesetzt werden if(IS_IE8) el.style["-ms-filter"] = '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (o * 100) + ')";'; el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (o * 100) + ')'; } else el.style.opacity = o; } function fadeTimer() { window.setTimeout(startFade, 2500); }; if(IS_IE) window.attachEvent('onload', fadeTimer, false); else window.addEventListener('load', fadeTimer, false); // ]]> </script> </head> <body> <div id="fadeElement"> <div id="fadeOverlay"></div> </div> </body> </html> + Multi-Zitat Zitieren