#1 10. März 2008 Zuletzt von einem Moderator bearbeitet: 15. April 2017 "laufende" Bilder Sers! Ich bräcuhte so eine art laufschrift, nur für Bilder. Die bilder sollen in einer endlos schleife (wären ca. 10) von rechts nach links laufen, und sobald man mit der maus drüber geht, anhalten, so dass man eines anklicken kann und weitergeleitet wird... murdoc hatte so etwas in der art mal gemacht: [Script] JavaScript Ticker - Update (IE fix + addons) - RR:Board is aber nimmer online... Wäre nett, wenn mir einer sagen könnte, wo ich sowas find. gruß gl + Multi-Zitat Zitieren
#2 11. März 2008 AW: "laufende" Bilder Hi nicht heterolord, ich hänge da grad an einem ähnlichen Problem wo ich die optimale Lösung noch nicht gefunden habe. Aber wenn du Bock hast schonmal selbst rumzuprobieren würde ich dir script.aculo.us vorschlagen, mit HTML: new Effect.MoveBy( .... http://wiki.script.aculo.us/scriptaculous/show/Effect.MoveBy ... in Kombination mit CSS - overflow: hidden. Grüße + Multi-Zitat Zitieren
#3 11. März 2008 AW: "laufende" Bilder mein vorschlag: ein div mit ID per CSS background auf dein bild setzen und per javascript die eigenschaft style.backgroundposition ändern als funktion und window.setInterval() z.B. + Multi-Zitat Zitieren
#4 11. März 2008 AW: "laufende" Bilder Mh, versteh ich nicht so ganz, für mich heißt dass, dass wir alle laufenden Bilder zum Hintergrund machen müssen, und z.B. Klickevents mit blinden Elementen abbilden müßten. + Multi-Zitat Zitieren
#5 11. März 2008 AW: "laufende" Bilder hm, ja stimmt, das ist ein problem war für meine zwecke aber ausreichend außerdem: wieviele laufende bilder hast du denn? + Multi-Zitat Zitieren
#6 11. März 2008 AW: "laufende" Bilder mit div-elementen mit den bildern als hintergrund wär bei 1nem oder 2bildern ganz nett, weil wenn ein bild links verschwinden würde, könnest dus rechts schon wieder erscheinen lassen. ansonsten würd ichs mit ganz normalen <img>'s machen. (verkleinern is nätürlich optional) tja mein ticker hätte das können (habs öfter mit bildern probiert, slideshow eben) nur leider hab ich den source nicht mehr, da mein altes mainboard drauf ging und der pc atm @ reparatur is. such mal bei google nach "javascript ticker". + Multi-Zitat Zitieren
#7 11. März 2008 AW: "laufende" Bilder Ich weiß ja nicht ob der Code auch sehr sauber sein soll, aber so habe ich es früher gemacht: Code: <marquee onmouseover="this.stop()" onmouseout="this.start()" direction="right" scrollAmount="2" height="100" width="200"><img src="URL ZUM BILD"></marquee> ScrollAmount = Geschwindikeit Direction = Richtung Height = Höhe Width = Breite Hoffe ich konnte dir helfen! mFg Chrisomator + Multi-Zitat Zitieren
#8 11. März 2008 AW: "laufende" Bilder Aber auch das ist auch JavaScript und ich denke, nicht heterolord will für seinen Shop schon sehr sauberen Code haben. + Multi-Zitat Zitieren
#9 12. März 2008 AW: "laufende" Bilder wo hab ich denn was von dem shop gesagt?! is aber richtig^^ ich hab ein gefunden, aber der funktioniert nicht in Firefox: Code: <script type="text/javascript"><!-- /* * * * * * * * * * * * * * * * D I E V A R I A B L E N * * * * * * * * * * * * * * * * * */ //°°°°°°°°°°Die News tNews=new Array(); tNews.push('<a href="http://www.modul-global.de/spitzhuettl-de/globalwohnen/astartseiten/index.php" target="_blank"><img src="Images/gwohnen_rgb.jpg" alt="" height="77" width="77" border="0" /></a>'); tNews.push('<a href="http://www.modul-global.de/spitzhuettl-de/globalwohnen/astartseiten/index.php" target="_blank"><img src="Images/gshop_rgb.jpg" alt="" height="77" width="77" border="0" /></a>'); //tNews.push('<b style="color:#012F85">Wunschtext kann überall eingefügt werden</b>'); tNews.push('<a href="http://www.modul-natura.de/spitzhuettl-de/auebersichtsseiten/index.php" target="_blank"><img src="Images/LogoNatura.jpg" alt="" height="77" width="250" border="0" /></a>'); tNews.push('<img src="Images/LogoMeisterstuecke.jpg" alt="" height="77" width="252" border="0" />'); tNews.push('<img src="Images/Culina.jpg" alt="" height="77" width="255" border="0" />'); tNews.push('<a href="http://www.huelsta.net" target="_blank"><img src="Images/huelsta_logo.gif" alt="" height="30" width="140" border="0" /></a>'); tNews.push('<a href="http://www.musterring.de/" target="_blank"><img src="Images/logo-musterring.gif" alt="" height="77" width="60" border="0" /></a>'); tNews.push('<a href="http://www.modul-modernart.de/spitzhuettl-de/001startseiten/3.php/" target="_blank"><img src="Images/001contursolo.gif" alt="" height="77" width="48" border="0" /></a>'); //°°°°°°°°°°Laufrichtung(up,down,left,right) strDir ='right'; //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right) strDelimiter=' '; //°°°°°°°°°°Interval in ms intInterval =20; //°°°°°°°°°°Stop bei mouseover?true:false blnStopHover=true; //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1 intRepeat =10; //°°°°°°°°°°Rahmen strBorder ='false'; //°°°°°°°°°°Breite intWidth =500; //°°°°°°°°°°Höhe intHeight =80; //Abstand Rahmen->Inhalt intPadding =4; //Background-color strBgc ='#ffffff'; //Text-color strTxtc ='#000000'; //Textausrichtung strAlign ='left'; //Schritt pro Durchlauf(px) intStep=1; /* * * * * * * * * * * * * * * * * * D E R T I C K E R * * * * * * * * * * * * * * * * * * * * * */ //IE ab V4? IE=document.all&&!window.opera; //DOM-Browser(ausser IE) DOM=document.getElementById&&!IE; //läuft ab IE4 und in DOM-Browsern if(DOM||IE) { //Ermitteln, ob Ticker horizontal oder vertikal laufen soll blnDir=(strDir=='up'||strDir=='down')?true:false; //Bei horizontalem Ticker wird ein nobr-, ansonsten ein div-Tag verwendet strNobr=(blnDir)?'div':'nobr'; //Trennzeichen zwischen den Einzelnen Eintraegen //bei horizontalem Ticker gemäss Angabe in Variale strDelimiter //Ansonsten Zeilenumbrueche strDelimiter=(blnDir)?'<br><br>':strDelimiter; //String fuer Textausrichtung bei vertikalem Ticker strAlign=(blnDir)?'text-align:'+strAlign+';':''; //Variable zum Speichern des Intervals var objGo; //Variable zum Speichern der Position intPos=0; //String erzeugen fuer JS-Code, falls Ticker beim mouseover stoppen soll strStopHover=(blnStopHover)?'onmouseover="clearInterval(objGo)"onmouseout="objGo=setInterval(\'DM_ticken()\','+intInterval+')"':''; //Tickertext zu String zusammenfuegen strText=(blnDir)?tNews.join(strDelimiter)+strDelimiter:tNews.join(strDelimiter)+strDelimiter; strNews=strText; for(i=1;i<intRepeat;++i) { strNews+=strText; } //TickerCode zu String zusammenfuegen strTicker='<div style="'+strAlign+'overflow:hidden;background-color:'+strBgc+ ';border:'+strBorder+';width:'+intWidth+'px;height:'+intHeight+'px;padding:'+intPadding+ 'px;"><'+strNobr+'><span id="ticker"style="position:relative;color:'+strTxtc+';background-color:'+strBgc+ ';"'+strStopHover+'>'+strNews+'</span></'+strNobr+'></div>'; //TickerCode im Dokument ausgeben document.write(strTicker); //Funktion, um Ticker ticken zu lassen function DM_ticken() { //Ticker-Objekt je nach Browser ermitteln objTicker=(IE)?document.all.ticker:document.getElementById('ticker'); //Array fuer zu manipulierende Eigenschaften des Tickers je nach Richtung //Richtung=new Array(Pixelwert zur Aenderung der Position,Breite/Höhe des Tickers,zu andernder Positionswert); arrDir=new Array(); arrDir['up'] =new Array(-1,objTicker.offsetHeight,'top'); arrDir['down'] =new Array(1,objTicker.offsetHeight,'top'); arrDir['left'] =new Array(1,objTicker.offsetWidth,'left'); arrDir['right'] =new Array(-1,objTicker.offsetWidth,'left'); //Ermitteln von Breite bzw. Höhe der anzuzeigenden Items dblOffset=arrDir[strDir][1]/intRepeat; //Neuen Positionswert ermitteln switch(strDir) { case'right': intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break; case'left': intPos=(intPos>0)?-dblOffset:intPos;break; case 'up': intPos=(Math.abs(intPos)>dblOffset)?0:intPos;break; case 'down': intPos=(intPos>0)?-dblOffset:intPos;break; } //Neuen Positionswert zuweisen objTicker.style[arrDir[strDir][2]]=intPos; //Positionswert hoch/heruntersetzen intPos+=intStep*arrDir[strDir][0]; } //Erneut ticken lassen objGo=setInterval('DM_ticken()',intInterval); } //--> </script> ich kenn mich in JS zu wenig aus, um den abzuändern, glaube aber, dass es mit dem gar nicht geht. Aber vllt. schafft es einer von euch Schau mir jetzt mal des aculo script an... gruß und dnak gl + Multi-Zitat Zitieren
#10 12. März 2008 AW: "laufende" Bilder Du meinst wohl SAU aka Scriptaculous aka Script.Aculo.Us Aber Aculo Script hab ich noch nie gehört. ^^ + Multi-Zitat Zitieren
#12 20. März 2008 AW: "laufende" Bilder hm, is schon einer weiter und hat so eins? ich hab immer noch nix derartiges hinbekommen :'( + Multi-Zitat Zitieren
#13 24. März 2008 AW: "laufende" Bilder Nabend nicht heterolord, haste weiter rumprobiert? Werd dir morgen nochmal dann ne andere Version posten! + Multi-Zitat Zitieren
#14 27. März 2008 AW: "laufende" Bilder sers maken! Ne, hatte leider noch keine Zeit. War die letzten Tage net daheim, weil ich bissl was fürs Abi tun wollte und bin deshalb in meine Wohnung in der Stadt, wo kein schwein is, gefahren.^^ Hatte da auch kein Inet. Aber nochmal 1000 Dank für die Hilfe und dein Engagement! gruß gl + Multi-Zitat Zitieren
#15 27. März 2008 AW: "laufende" Bilder Sry nochmal das es sich nochmal verschiebt, überarbeite dir das aber auf jeden Fall nochmal! + Multi-Zitat Zitieren
#16 28. März 2008 AW: "laufende" Bilder sers! du brauchst dich da echt nich für zu entschuldigen^^ Is doch gar kein Problem. Lass dir Zeit und wenns fertig is, is fertig. gruß gl + Multi-Zitat Zitieren