Auf Thema antworten 2026

Beitrag

<blockquote data-quote="stroyer" data-source="post: 851598" data-attributes="member: 263373">AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?Per Flash ließe sich das elegant lösen, nur ist es etwas kompliziert. In JS würde ich es sonst einfach so machen, dass ich wie es Christian im Prinzip gemacht hat Scrollbalken ausblenden bzw. selber einen per JS und divs erstellen und dann einfach über CSS left anpassen.Ich habe so was mal gemacht mit eigenem Scrollbalken. (Nicht erschrecken; per PHP generiert)Bild kannst du ersetzen bzw. in dem Fall eine 4500x100 Pixel Grafik (ein paar Fotos nebeneinander). Vielleicht findest du was, was dir nutzt.[html]&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;&lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;&nbsp; &nbsp; &lt;style type=&quot;text/css&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;!--&nbsp; &nbsp; &nbsp; &nbsp; a&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:#CCCCCC;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; a img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; --&gt;&nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;!--&nbsp; &nbsp; &nbsp; &nbsp; var drag=false;&nbsp; &nbsp; &nbsp; &nbsp; var xstart=0;&nbsp; &nbsp; &nbsp; &nbsp; var lefting=false;&nbsp; &nbsp; &nbsp; &nbsp; var righting=false;&nbsp; &nbsp; &nbsp; &nbsp; function down(event)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drag=true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xstart=event.screenX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function getInt(str)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x=&#039;&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var not=&#039;--0123456789&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(i=0;i&lt;str.length;i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(not.search(str.substr(i,1))&gt;1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x+=str.substr(i,1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return x*1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function passt(i)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(i&lt;1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i=1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(i&gt;388-38-1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i=388-38-1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return i;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function ch()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;bilder&#039;).style.marginLeft=&#039;-&#039;+(getInt(document.getElementById(&#039;slider&#039;).style.left)/(388-38-1)*(45*100-448)-1)+&#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function left()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dx=-5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;slider&#039;).style.left=passt(getInt(document.getElementById(&#039;slider&#039;).style.left)+dx)+&#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ch();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lefting=true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(&#039;checkLeft(-5);&#039;,300);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function right()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dx=5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;slider&#039;).style.left=passt(getInt(document.getElementById(&#039;slider&#039;).style.left)+dx)+&#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ch();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; righting=true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(&#039;checkRight(5);&#039;,300);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function checkRight(c)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(righting==false)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dx=c;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;slider&#039;).style.left=passt(getInt(document.getElementById(&#039;slider&#039;).style.left)+dx)+&#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ch();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(&#039;checkRight(4);&#039;,50);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function checkLeft(c)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(lefting==false)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dx=c;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;slider&#039;).style.left=passt(getInt(document.getElementById(&#039;slider&#039;).style.left)+dx)+&#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ch();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(&#039;checkLeft(-4);&#039;,50);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function move(event)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(drag==false)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dx=event.screenX-xstart;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xstart=event.screenX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(passt(getInt(document.getElementById(&#039;slider&#039;).style.left)+dx)!=getInt(document.getElementById(&#039;slider&#039;).style.left)+dx)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xstart-=dx-passt(getInt(document.getElementById(&#039;slider&#039;).style.left)+dx)+getInt(document.getElementById(&#039;slider&#039;).style.left);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&#039;slider&#039;).style.left=passt(getInt(document.getElementById(&#039;slider&#039;).style.left)+dx)+&#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ch();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function up()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; drag=false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lefting=false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; righting=false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; //--&gt;&nbsp; &nbsp; &lt;/script&gt;&nbsp; &lt;/head&gt;&nbsp; &lt;body onMouseUp=&quot;javascript:up();&quot; onMouseMove=&quot;javascript:move(event);&quot;&gt;&nbsp; &nbsp; &lt;div style=&quot;overflow: hidden; width:448px; height:125px;&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div style=&quot;overflow: hidden; position:absolute; margin-left:0px; height:100px; width:448px; margin-top:0px;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;bilder&quot; style=&quot;overflow: hidden; margin-left:0px; width:4500px; height:100px; margin-top:0px;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img width=&quot;4500&quot; height=&quot;100&quot; style=&quot;position:absolute; margin-left:0px;&quot; src=&quot;../fotogalerie/wide.php&quot; usemap=&quot;#map&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;map name=&quot;map&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;area shape=&quot;rect&quot; coords=&quot;0,0,100,100&quot; href=&quot;slide.php?id=0&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;100,0,200,100&quot; href=&quot;slide.php?id=1&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;200,0,300,100&quot; href=&quot;slide.php?id=2&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;300,0,400,100&quot; href=&quot;slide.php?id=3&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;400,0,500,100&quot; href=&quot;slide.php?id=4&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;500,0,600,100&quot; href=&quot;slide.php?id=5&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;600,0,700,100&quot; href=&quot;slide.php?id=6&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;700,0,800,100&quot; href=&quot;slide.php?id=7&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;800,0,900,100&quot; href=&quot;slide.php?id=8&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;900,0,1000,100&quot; href=&quot;slide.php?id=9&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1000,0,1100,100&quot; href=&quot;slide.php?id=10&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1100,0,1200,100&quot; href=&quot;slide.php?id=11&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1200,0,1300,100&quot; href=&quot;slide.php?id=12&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1300,0,1400,100&quot; href=&quot;slide.php?id=13&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1400,0,1500,100&quot; href=&quot;slide.php?id=14&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1500,0,1600,100&quot; href=&quot;slide.php?id=15&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1600,0,1700,100&quot; href=&quot;slide.php?id=16&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1700,0,1800,100&quot; href=&quot;slide.php?id=17&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1800,0,1900,100&quot; href=&quot;slide.php?id=18&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;1900,0,2000,100&quot; href=&quot;slide.php?id=19&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2000,0,2100,100&quot; href=&quot;slide.php?id=20&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2100,0,2200,100&quot; href=&quot;slide.php?id=21&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2200,0,2300,100&quot; href=&quot;slide.php?id=22&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2300,0,2400,100&quot; href=&quot;slide.php?id=23&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2400,0,2500,100&quot; href=&quot;slide.php?id=24&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2500,0,2600,100&quot; href=&quot;slide.php?id=25&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2600,0,2700,100&quot; href=&quot;slide.php?id=26&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2700,0,2800,100&quot; href=&quot;slide.php?id=27&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2800,0,2900,100&quot; href=&quot;slide.php?id=28&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;2900,0,3000,100&quot; href=&quot;slide.php?id=29&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3000,0,3100,100&quot; href=&quot;slide.php?id=30&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3100,0,3200,100&quot; href=&quot;slide.php?id=31&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3200,0,3300,100&quot; href=&quot;slide.php?id=32&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3300,0,3400,100&quot; href=&quot;slide.php?id=33&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3400,0,3500,100&quot; href=&quot;slide.php?id=34&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3500,0,3600,100&quot; href=&quot;slide.php?id=35&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3600,0,3700,100&quot; href=&quot;slide.php?id=36&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3700,0,3800,100&quot; href=&quot;slide.php?id=37&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3800,0,3900,100&quot; href=&quot;slide.php?id=38&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;3900,0,4000,100&quot; href=&quot;slide.php?id=39&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;4000,0,4100,100&quot; href=&quot;slide.php?id=40&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;4100,0,4200,100&quot; href=&quot;slide.php?id=41&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;4200,0,4300,100&quot; href=&quot;slide.php?id=42&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;4300,0,4400,100&quot; href=&quot;slide.php?id=43&quot;&gt;&lt;area shape=&quot;rect&quot; coords=&quot;4400,0,4500,100&quot; href=&quot;slide.php?id=44&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/map&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;div style=&quot;position:absolute; margin-top:100px; width:448px; height:25px; background-color:blue;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div style=&quot;position:absolute; left:6px; margin-top:1px; color:white;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;javascript:void(0);&quot; onMouseDown=&quot;javascript:left();&quot;&gt;&amp;larr;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div style=&quot;position:absolute; left:30px; right:30px; width:388px; height:25px; background-color:grey;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;slider&quot; style=&quot;position:absolute; height:23px; top:1px; left:1px; width:38px; background-color:lightgrey;&quot; onMouseDown=&quot;javascript:down(event);&quot; onMouseMove=&quot;javascript:move(event);&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div style=&quot;position:absolute; right:6px; margin-top:1px; color:white;&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;javascript:void(0);&quot; onMouseDown=&quot;javascript:right();&quot;&gt;&amp;rarr;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/body&gt;&lt;/html&gt;[/html]&nbsp;Ich arbeite gerade daran, dass die Animation &quot;weich&quot;, also nicht linear geht. (Beispiel <a href="http://www.space-shuttle-mission.com" target="_blank">www.space-shuttle-mission.com</a> ; dort ist es mit Flash realisiert)</blockquote>

[QUOTE="stroyer, post: 851598, member: 263373"] [b]AW: overflow nicht mit scrollbalken, sondern mit Buttons bewegen?[/b] Per Flash ließe sich das elegant lösen, nur ist es etwas kompliziert. In JS würde ich es sonst einfach so machen, dass ich wie es Christian im Prinzip gemacht hat Scrollbalken ausblenden bzw. selber einen per JS und divs erstellen und dann einfach über CSS left anpassen. Ich habe so was mal gemacht mit eigenem Scrollbalken. (Nicht erschrecken; per PHP generiert) Bild kannst du ersetzen bzw. in dem Fall eine 4500x100 Pixel Grafik (ein paar Fotos nebeneinander). Vielleicht findest du was, was dir nutzt. [html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body onMouseUp="javascript:up();" onMouseMove="javascript:move(event);"> <div style="overflow: hidden; width:448px; height:125px;"> <div style="overflow: hidden; position:absolute; margin-left:0px; height:100px; width:448px; margin-top:0px;"> <div id="bilder" style="overflow: hidden; margin-left:0px; width:4500px; height:100px; margin-top:0px;"> <img width="4500" height="100" style="position:absolute; margin-left:0px;" src="../fotogalerie/wide.php" usemap="#map"> <map name="map"> <area shape="rect" coords="0,0,100,100" href="slide.php?id=0"><area shape="rect" coords="100,0,200,100" href="slide.php?id=1"><area shape="rect" coords="200,0,300,100" href="slide.php?id=2"><area shape="rect" coords="300,0,400,100" href="slide.php?id=3"><area shape="rect" coords="400,0,500,100" href="slide.php?id=4"><area shape="rect" coords="500,0,600,100" href="slide.php?id=5"><area shape="rect" coords="600,0,700,100" href="slide.php?id=6"><area shape="rect" coords="700,0,800,100" href="slide.php?id=7"><area shape="rect" coords="800,0,900,100" href="slide.php?id=8"><area shape="rect" coords="900,0,1000,100" href="slide.php?id=9"><area shape="rect" coords="1000,0,1100,100" href="slide.php?id=10"><area shape="rect" coords="1100,0,1200,100" href="slide.php?id=11"><area shape="rect" coords="1200,0,1300,100" href="slide.php?id=12"><area shape="rect" coords="1300,0,1400,100" href="slide.php?id=13"><area shape="rect" coords="1400,0,1500,100" href="slide.php?id=14"><area shape="rect" coords="1500,0,1600,100" href="slide.php?id=15"><area shape="rect" coords="1600,0,1700,100" href="slide.php?id=16"><area shape="rect" coords="1700,0,1800,100" href="slide.php?id=17"><area shape="rect" coords="1800,0,1900,100" href="slide.php?id=18"><area shape="rect" coords="1900,0,2000,100" href="slide.php?id=19"><area shape="rect" coords="2000,0,2100,100" href="slide.php?id=20"><area shape="rect" coords="2100,0,2200,100" href="slide.php?id=21"><area shape="rect" coords="2200,0,2300,100" href="slide.php?id=22"><area shape="rect" coords="2300,0,2400,100" href="slide.php?id=23"><area shape="rect" coords="2400,0,2500,100" href="slide.php?id=24"><area shape="rect" coords="2500,0,2600,100" href="slide.php?id=25"><area shape="rect" coords="2600,0,2700,100" href="slide.php?id=26"><area shape="rect" coords="2700,0,2800,100" href="slide.php?id=27"><area shape="rect" coords="2800,0,2900,100" href="slide.php?id=28"><area shape="rect" coords="2900,0,3000,100" href="slide.php?id=29"><area shape="rect" coords="3000,0,3100,100" href="slide.php?id=30"><area shape="rect" coords="3100,0,3200,100" href="slide.php?id=31"><area shape="rect" coords="3200,0,3300,100" href="slide.php?id=32"><area shape="rect" coords="3300,0,3400,100" href="slide.php?id=33"><area shape="rect" coords="3400,0,3500,100" href="slide.php?id=34"><area shape="rect" coords="3500,0,3600,100" href="slide.php?id=35"><area shape="rect" coords="3600,0,3700,100" href="slide.php?id=36"><area shape="rect" coords="3700,0,3800,100" href="slide.php?id=37"><area shape="rect" coords="3800,0,3900,100" href="slide.php?id=38"><area shape="rect" coords="3900,0,4000,100" href="slide.php?id=39"><area shape="rect" coords="4000,0,4100,100" href="slide.php?id=40"><area shape="rect" coords="4100,0,4200,100" href="slide.php?id=41"><area shape="rect" coords="4200,0,4300,100" href="slide.php?id=42"><area shape="rect" coords="4300,0,4400,100" href="slide.php?id=43"><area shape="rect" coords="4400,0,4500,100" href="slide.php?id=44"> </map> </div> </div> <div style="position:absolute; margin-top:100px; width:448px; height:25px; background-color:blue;"> <div style="position:absolute; left:6px; margin-top:1px; color:white;"> <a href="javascript:void(0);" onMouseDown="javascript:left();">←</a> </div> <div style="position:absolute; left:30px; right:30px; width:388px; height:25px; background-color:grey;"> <div id="slider" style="position:absolute; height:23px; top:1px; left:1px; width:38px; background-color:lightgrey;" onMouseDown="javascript:down(event);" onMouseMove="javascript:move(event);"> </div> </div> <div style="position:absolute; right:6px; margin-top:1px; color:white;"> <a href="javascript:void(0);" onMouseDown="javascript:right();">→</a> </div> </div> </div> </body> </html> [/html] Ich arbeite gerade daran, dass die Animation "weich", also nicht linear geht. (Beispiel [URL="http://www.space-shuttle-mission.com"]www.space-shuttle-mission.com[/URL] ; dort ist es mit Flash realisiert) [/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?