Auf Thema antworten 2026

Beitrag

<blockquote data-quote="RedDef" data-source="post: 1389120" data-attributes="member: 292360">Hallo LeuteIch versuche mich daran ein Fotoalbum mit Javascript zu erstellen. Ich arbeite nach einem Tutorial von psd. Dieses Tutorial ist super erklärt, ich finde jedoch den Fehler im Quelltext nicht. Das Problem ist, wenn ich die Seite in meinem Browser aufrufe, dann erscheint das Grosse Bild so wie es sollte. Die Navigation funktioniert jedoch überhaupt nicht so wie sie gedacht ist. Die Navigation wird nicht in einer Ebene angezeigt. Wenn ich auf die Pfeile gehe um auf die Seite zu scrollen funktionieren diese nicht. Zudem muss ich die Bilder immer doppelt anklicken, welche die in der Navigation sind, damit das Original angezeigt wird. Ich habe schon lange nach Fehlern gesucht, kann jedoch keinen finden.Hier sind die Quellcodes:CSS:[code]*html{&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;}body{&nbsp; &nbsp; margin:0;&nbsp; &nbsp; padding:0;}#gallery{&nbsp; &nbsp; position:relative;&nbsp; &nbsp; width:810px;&nbsp; &nbsp; height:715px;&nbsp; &nbsp; top:20px;&nbsp; &nbsp; left:50%;&nbsp; &nbsp; margin-left:-400px;&nbsp; &nbsp; border:1px solid #000000;}#bildgross{&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; width:800px;&nbsp; &nbsp; height:600px;&nbsp; &nbsp; top:5;&nbsp; &nbsp; left:5;}#navigation{&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; width:800px;&nbsp; &nbsp; height:100px;&nbsp; &nbsp; top:610px;&nbsp; &nbsp; left:5;}#thumbs{&nbsp; &nbsp; width:734px;&nbsp; &nbsp; float:left;&nbsp; &nbsp; white-space:nowrap;&nbsp; &nbsp; overflow:hidden:}#thumbs img{&nbsp; &nbsp; opacity:0.6;&nbsp; &nbsp; filter:alpha(opacity=60);}[/code]HTML/javascript:[code]&lt;html&gt;&lt;head&gt;&lt;title&gt;Fotoalbum&lt;/title&gt;&lt;link href=&quot;format.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;&lt;script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;&gt;&nbsp; &nbsp; var scrollStep=2;&nbsp; &nbsp; var timer;&nbsp; &nbsp; &nbsp; &nbsp; function scrollDivRight(){&nbsp; &nbsp; &nbsp; &nbsp; clearTimeout(timer);&nbsp; &nbsp; &nbsp; &nbsp; d=document.getElementById(&#039;thumbs&#039;);&nbsp; &nbsp; &nbsp; &nbsp; d.scrollLeft+=scrollStep;&nbsp; &nbsp; &nbsp; &nbsp; timer=setTimeout(&quot;scrollDivRight()&quot;,10);&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function scrollDivLeft(){&nbsp; &nbsp; &nbsp; &nbsp; clearTimeout(timer);&nbsp; &nbsp; &nbsp; &nbsp; d=document.getElementById(&#039;thumbs&#039;);&nbsp; &nbsp; &nbsp; &nbsp; d.scrollLeft-=scrollStep;&nbsp; &nbsp; &nbsp; &nbsp; timer=setTimeout(&quot;scrollDivLeft()&quot;,10);&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function stopMe(){&nbsp; &nbsp; &nbsp; &nbsp; clearTimeout(timer);&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; //Thumbnails mit mouseover versehen&nbsp; &nbsp; &nbsp; &nbsp; function opac(thumb,wert){&nbsp; &nbsp; &nbsp; &nbsp; thumb.style.opacity = wert;&nbsp; &nbsp; &nbsp; &nbsp; thumb.style.filter = &quot;alpha(opacity=&quot;+ wert*100 +&quot;)&quot;;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; //Bilder anzeigen mit Ueberblendung&nbsp; &nbsp; &nbsp; &nbsp; function bildershow(bild){&nbsp; &nbsp; &nbsp; &nbsp; document.bild.src = document.bild2.src;&nbsp; &nbsp; &nbsp; &nbsp; document.bild2.src = bild;&nbsp; &nbsp; &nbsp; &nbsp; fade(0);&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function fade(step){&nbsp; &nbsp; &nbsp; &nbsp; var imgs = document.getElementById(&quot;bildergross&quot;).getElementsByTagName(&quot;img&quot;);&nbsp; &nbsp; &nbsp; &nbsp; imgs[1].style.opacity = step/100;&nbsp; &nbsp; &nbsp; &nbsp; imgs[1].style.filter = &quot;alpha(opacity=&quot; + step + &quot;)&quot;;&nbsp; &nbsp; &nbsp; &nbsp; step = step + 2;&nbsp; &nbsp; &nbsp; &nbsp; if (step &lt;=100){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.setTimeout(function(){ fade(step); }, 1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function preloadImg(){&nbsp; &nbsp; &nbsp; &nbsp; document.vorladen = new Array();&nbsp; &nbsp; &nbsp; &nbsp; if(document.images){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i &lt; preloadImg.arguments.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.vorladen[i] = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.vorladen[i].src = preloadImg.arguments[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&lt;/script&gt;&lt;/head&gt;&lt;body onLoad=&quot;preloadImg(&#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg&#039;,);&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;gallery&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;bildgross&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg&quot; name=&quot;bild&quot; style=&quot;position:absolute; top:0; left:0;&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg&quot; name=&quot;bild1&quot; style=&quot;position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg&quot; name=&quot;bild2&quot; style=&quot;position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg&quot; name=&quot;bild3&quot; style=&quot;position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg&quot; name=&quot;bild4&quot; style=&quot;position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg&quot; name=&quot;bild5&quot; style=&quot;position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg&quot; name=&quot;bild6&quot; style=&quot;position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);&quot; /&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;navigation&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/left.png&quot; style=&quot;float:right&quot; onMouseOver=&quot;scrollDivLeft();&quot; onMouseOut=&quot;stopMe()&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;thumbs&quot;&gt;&nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/th-1.jpg&quot; onMouseOver=&quot;opac(this,1.0);&quot; onMouseOut=&quot;opac(this,0.6);&quot; onClick=&quot;bildershow(&#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg&#039;);&quot;/&gt;&nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/th-2.jpg&quot; onMouseOver=&quot;opac(this,1.0);&quot; onMouseOut=&quot;opac(this,0.6);&quot; onClick=&quot;bildershow(&#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg&#039;);&quot;/&gt;&nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/th-3.jpg&quot; onMouseOver=&quot;opac(this,1.0);&quot; onMouseOut=&quot;opac(this,0.6);&quot; onClick=&quot;bildershow(&#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg&#039;);&quot;/&gt;&nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/th-4.jpg&quot; onMouseOver=&quot;opac(this,1.0);&quot; onMouseOut=&quot;opac(this,0.6);&quot; onClick=&quot;bildershow(&#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg&#039;);&quot;/&gt;&nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/th-5.jpg&quot; onMouseOver=&quot;opac(this,1.0);&quot; onMouseOut=&quot;opac(this,0.6);&quot; onClick=&quot;bildershow(&#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg&#039;);&quot;/&gt;&nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/th-6.jpg&quot; onMouseOver=&quot;opac(this,1.0);&quot; onMouseOut=&quot;opac(this,0.6);&quot; onClick=&quot;bildershow(&#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg&#039;);&quot;/&gt;&nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/th-7.jpg&quot; onMouseOver=&quot;opac(this,1.0);&quot; onMouseOut=&quot;opac(this,0.6);&quot; onClick=&quot;bildershow(&#039;../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg&#039;);&quot;/&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;../Fotoalbum/Beispielbilder/Format/right.png&quot; style=&quot;float:right&quot; onMouseOver=&quot;scrollDivRight();&quot; onMouseOut=&quot;stopMe()&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/code]Die Namen der Fotos und der Thumbs stimmen und der Pfad auch, dies habe ich überprüft, und sie werden auch angezeigt. Ich wäre echt froh, wenn mir jemand helfen könnte.LgRed_Def</blockquote>

[QUOTE="RedDef, post: 1389120, member: 292360"] Hallo Leute Ich versuche mich daran ein Fotoalbum mit Javascript zu erstellen. Ich arbeite nach einem Tutorial von psd. Dieses Tutorial ist super erklärt, ich finde jedoch den Fehler im Quelltext nicht. Das Problem ist, wenn ich die Seite in meinem Browser aufrufe, dann erscheint das Grosse Bild so wie es sollte. Die Navigation funktioniert jedoch überhaupt nicht so wie sie gedacht ist. Die Navigation wird nicht in einer Ebene angezeigt. Wenn ich auf die Pfeile gehe um auf die Seite zu scrollen funktionieren diese nicht. Zudem muss ich die Bilder immer doppelt anklicken, welche die in der Navigation sind, damit das Original angezeigt wird. Ich habe schon lange nach Fehlern gesucht, kann jedoch keinen finden. Hier sind die Quellcodes: CSS: [code] *html{ margin:0; padding:0; } body{ margin:0; padding:0; } #gallery{ position:relative; width:810px; height:715px; top:20px; left:50%; margin-left:-400px; border:1px solid #000000; } #bildgross{ position:absolute; width:800px; height:600px; top:5; left:5; } #navigation{ position:absolute; width:800px; height:100px; top:610px; left:5; } #thumbs{ width:734px; float:left; white-space:nowrap; overflow:hidden: } #thumbs img{ opacity:0.6; filter:alpha(opacity=60); } [/code]HTML/javascript: [code] <html> <head> <title>Fotoalbum</title> <link href="format.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript"> var scrollStep=2; var timer; function scrollDivRight(){ clearTimeout(timer); d=document.getElementById('thumbs'); d.scrollLeft+=scrollStep; timer=setTimeout("scrollDivRight()",10); } function scrollDivLeft(){ clearTimeout(timer); d=document.getElementById('thumbs'); d.scrollLeft-=scrollStep; timer=setTimeout("scrollDivLeft()",10); } function stopMe(){ clearTimeout(timer); } //Thumbnails mit mouseover versehen function opac(thumb,wert){ thumb.style.opacity = wert; thumb.style.filter = "alpha(opacity="+ wert*100 +")"; } //Bilder anzeigen mit Ueberblendung function bildershow(bild){ document.bild.src = document.bild2.src; document.bild2.src = bild; fade(0); } function fade(step){ var imgs = document.getElementById("bildergross").getElementsByTagName("img"); imgs[1].style.opacity = step/100; imgs[1].style.filter = "alpha(opacity=" + step + ")"; step = step + 2; if (step <=100){ window.setTimeout(function(){ fade(step); }, 1); } } function preloadImg(){ document.vorladen = new Array(); if(document.images){ for(var i = 0; i < preloadImg.arguments.length; i++){ document.vorladen[i] = new Image(); document.vorladen[i].src = preloadImg.arguments[i]; } } } </script> </head> <body onLoad="preloadImg('../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg', '../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg', '../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg', '../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg', '../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg', '../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg', '../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg',);"> <div id="gallery"> <div id="bildgross"> <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg" name="bild" style="position:absolute; top:0; left:0;" /> <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg" name="bild1" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" /> <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg" name="bild2" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" /> <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg" name="bild3" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" /> <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg" name="bild4" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" /> <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg" name="bild5" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" /> <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg" name="bild6" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" /> </div> <div id="navigation"> <img src="../Fotoalbum/Beispielbilder/Format/left.png" style="float:right" onMouseOver="scrollDivLeft();" onMouseOut="stopMe()"/> <div id="thumbs"> <img src="../Fotoalbum/Beispielbilder/Format/th-1.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg');"/> <img src="../Fotoalbum/Beispielbilder/Format/th-2.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg');"/> <img src="../Fotoalbum/Beispielbilder/Format/th-3.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg');"/> <img src="../Fotoalbum/Beispielbilder/Format/th-4.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg');"/> <img src="../Fotoalbum/Beispielbilder/Format/th-5.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg');"/> <img src="../Fotoalbum/Beispielbilder/Format/th-6.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg');"/> <img src="../Fotoalbum/Beispielbilder/Format/th-7.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg');"/> </div> <img src="../Fotoalbum/Beispielbilder/Format/right.png" style="float:right" onMouseOver="scrollDivRight();" onMouseOut="stopMe()"/> </div> </div> </body> </html> [/code]Die Namen der Fotos und der Thumbs stimmen und der Pfad auch, dies habe ich überprüft, und sie werden auch angezeigt. Ich wäre echt froh, wenn mir jemand helfen könnte. Lg Red_Def [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?