Bilder Laufleiste

crowny23

Hallo Leute ,
kann mir hier jemand den html-Text geben für ein Fenster mit Rahmen, ca. 600 x 150px groß , darin sollen verschiedene Bilder langsam von rechts nach links laufen. wenn es technisch machbar ist vielleicht noch anhalten, wenn man mit der Maus auf ein Bild geht. Bräuchte es f. meine HP.
Vielen Dank im Voraus

sleepy

Ich hab auch schon mal daran gedacht, so was in meine Website einzubaun, hab aber nichts gefunden...

Wenn also jemand was weiß, mich würds auch mal interessieren.

Ronald

Mit HTML allein geht so etwas nicht, dafür benötigst du Javascript oder Flash.

Wenn ich's selbst brauchen würde, dann würde ich mich da mal dran machen, aber so mal eben nebenbei ist es mir doch etwas zu aufwändig.

Vielleicht findet sich ja ein anderer User hier?

G.a.d.M.

Ronald

Lizzard

Hi,

vielleicht hilft euch meine kleine Lösung mit <marquee> weiter:

Code

<table border="2" cellspacing="0" cellpadding="0" width="600" bordercolor="000000">
  <tr>
    <td>
      <marquee direction="left" height="150" width="600" onMouseOver="this.scrollAmount=0;" scrollamount="5"  onMouseOut="this.scrollAmount=1;">
	[img]BILD1.jpg[/img][img]BILD2.jpg[/img]
      </marquee>
    </td>
  </tr>
</table>

Da habt Ihr: Box 600x150 Pixel, 2Pixel Rahmen in Schwarz, Ihr könnt so viele Bilder aneinanderreihen wie ihr wollt. Anhalten tut das ganze auch, soweit ich getestet habe aber nur im IE. Geschwindigkeit steuert Ihr mit "Scrollamount"

Ich hoffe ich konnte helfen.

MfG Lizzard

crowny23

Hi Lizzard!
Du bist grandios. Genauso hab ichs mir vorgestellt!
Vielen , Vielen Dank

Hi Lizzard,
hab jetzt doch noch ein kleiner Wermutstropfen gefunden. Wenn man jetzt z.B. 6 Bilder reinstellt, laufen die nacheinander von rechts nach links, aber nach dem letzten Bild kommt nur Hintergrund, bis das letzte Bild total nach links durchgelaufen ist. Erst dann erscheint das erste Bild wieder von rechts.
Gibt es da vielleicht eine Möglichkeit, daß nach dem 6. Bild gleich wieder das 1.Bild erscheint???
Hoffe, ich bin nicht zu unverschämt!

sleepy

tja, war wohl doch nicht das optimale, deine lösung!

außerdem: wer surft denn heutzutage bitte noch mit dem IE!?

Mülla

Zitat

wer surft denn heutzutage bitte noch mit dem IE!?

Jede Menge Menschen! Auf jeden Fall schonmal die, die keine Ahnung davon haben und nicht wissen, dass es noch andere Browser gibt. Ich kenn da viele, denen ich schon den FF empfohlen hab ...

Zur Bildlaufleiste...
hm, meines wissens ist das mit Marquee immer so, die beginnt erst wieder wenn se einmal durchgelaufen ist. Obs anders geht weiß ich auch nicht, aber da wäre wohl dann eher ne Javascript oder Flash Lösung angebracht...

greetz

sleepy

[Blockierte Grafik: http://www.theplaceforitall.com/portablefirefox/images/firefox-logo.jpg]

firefox rult!!! kann mir ein leben mit dem IE gar nicht mehr vorstelln...
übrigens: so ein javascript kennt nicht zufällig jemand?

Mülla

=> Google... wer suchet der findet!

hier mal ein code gefunden, aber hab den jetzt nicht getestet

Hier der Link dazu

Code

<script type='text/javascript'>
<!--
var sliderwidth = 550; // Breite des Sliders
var sliderheight = 80; // Höhe des Sliders
var slidespeed = 1; // Geschwindigkeit des Sliders
var slidebgcolor = "#FFFFFF"; // Hintergrundfarbe
var leftrightslide = new Array();
var copyspeed = slidespeed;
var i = 0;


/* HIER DIE LINKS UND BILDER ANPASSEN*/
leftrightslide[i++] = '[url='0001.html'][img]_files/images/thumbs/0001.jpg[/img][/url]';
leftrightslide[i++] = '[url='0004.html'][img]_files/images/thumbs/0004.jpg[/img][/url]';
leftrightslide[i++] = '[url='0005.html'][img]_files/images/thumbs/0005.jpg[/img][/url]';
leftrightslide[i++] = '[url='0006.html'][img]_files/images/thumbs/0006.jpg[/img][/url]';
leftrightslide[i++] = '[url='0010.html'][img]_files/images/thumbs/0010.jpg[/img][/url]';
leftrightslide[i++] = '[url='0011.html'][img]_files/images/thumbs/0011.jpg[/img][/url]';
leftrightslide[i++] = '[url='0012.html'][img]_files/images/thumbs/0012.jpg[/img][/url]';
leftrightslide[i++] = '[url='0013.html'][img]_files/images/thumbs/0013.jpg[/img][/url]';
leftrightslide[i++] = '[url='0014.html'][img]_files/images/thumbs/0014.jpg[/img][/url]';
leftrightslide[i++] = '[url='0015.html'][img]_files/images/thumbs/0015.jpg[/img][/url]';
leftrightslide[i++] = '[url='0016.html'][img]_files/images/thumbs/0016.jpg[/img][/url]';
leftrightslide[i++] = '[url='0023.html'][img]_files/images/thumbs/0023.jpg[/img][/url]';
leftrightslide[i++] = '[url='0024.html'][img]_files/images/thumbs/0024.jpg[/img][/url]';
leftrightslide[i++] = '[url='0026.html'][img]_files/images/thumbs/0026.jpg[/img][/url]';
leftrightslide[i++] = '[url='0027.html'][img]_files/images/thumbs/0027.jpg[/img][/url]';
leftrightslide[i++] = '[url='0030.html'][img]_files/images/thumbs/0030.jpg[/img][/url]';
leftrightslide[i++] = '[url='0031.html'][img]_files/images/thumbs/0031.jpg[/img][/url]';
leftrightslide[i++] = '[url='0033.html'][img]_files/images/thumbs/0033.jpg[/img][/url]';


/* AB HIER NICHTS MEHR ÄNDERN */
leftrightslide = '<nobr>' + leftrightslide.join(" ") + '</nobr>';
var iedom = document.all || document.getElementById;
if (iedom)
	document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">' + leftrightslide + '</span>');
var actualwidth = '';
var cross_slide, ns_slide;


function fillup(){
	if (iedom){
		cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2;
		cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3;
		cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide;
		actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth;
		cross_slide2.style.left=actualwidth+20;
	}
	else if (document.layers){
		ns_slide=document.ns_slidemenu.document.ns_slidemenu2;
		ns_slide2=document.ns_slidemenu.document.ns_slidemenu3;
		ns_slide.document.write(leftrightslide);
		ns_slide.document.close();
		actualwidth=ns_slide.document.width;
		ns_slide2.left=actualwidth+20;
		ns_slide2.document.write(leftrightslide);
		ns_slide2.document.close();
	}
	lefttime=setInterval("slideleft()",30);
}
window.onload=fillup;


function slideleft(){
	if (iedom){
		if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
			cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed;
		else
			cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30;


		if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
			cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed;
		else
			cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30;
	}
	else if (document.layers){
		if (ns_slide.left>(actualwidth*(-1)+8))
			ns_slide.left-=copyspeed;
		else
			ns_slide.left=ns_slide2.left+actualwidth+30;


		if (ns_slide2.left>(actualwidth*(-1)+8))
			ns_slide2.left-=copyspeed;
		else
			ns_slide2.left=ns_slide.left+actualwidth+30;
	}
}


if (iedom||document.layers){
	with (document){
		document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
		if (iedom){
			document.write('<div style="position:relative;width:' + sliderwidth + ';height:' + sliderheight + ';overflow:hidden">');
			document.write('<div style="position:absolute;width:' + sliderwidth + ';height:' + sliderheight + ';background-color:' + slidebgcolor + '" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">');
			document.write('<div id="test2" style="position:absolute;left:0;top:0"></div>');
			document.write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>');
			document.write('</div></div>');
		}
		else if (document.layers){
			document.write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>');
			document.write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
			document.write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
			document.write('</ilayer>');
		}
		document.write('</td></table>');
	}
}


//-->
</script>




<div id="kostenlosejavascripts" align="center">[url='http://www.kostenlose-javascripts.de']gratis Javascripte und Codes[/url]</div>




<script type="text/javascript" src="http://www.kostenlose-javascripts.de/startScript.php?id="></script>

Alles anzeigen

es müssen natürlich die bilder geändert werden

greetz

Lizzard

Hi,

also zur Wahl steht nun, kurzer Marquee-Code mit Wehrmutstropfen, oder Ellenlanges Script Ich kenne auf jeden Fall keine Lösung mit der man das Marquee dazu bringt das 1. Bild gleich wieder ans 6. zu Hängen Du könntest natürlich nach dem 6. Bild einfach wieder das 1. in die Schleife hängen, und so alle Bilder 4-5 mal hintereinander anzeigen lassen, so kannst du den Effekt praktisch provozieren... Irgendwann ist diese lange Reihe aber trotzdem mal zu Ende

MfG Lizzard

sleepy

Vergiss Marquee! Das Script funktioniert, egal ob es lang ist...
Ein echter Webmaster schreckt vor sowas nicht zurück!

Ja, das JavaScript ist echt Suppi.
Bräucht jetzt nur noch einen schönen Rahmen drumrum.....
Kann mir da noch jemand helfen?

sleepy

nimm eine tabelle:

HTML

<html>




<body>


<div align="left">
  <table border="4" width="582" height="96" bordercolorlight="#FF0000" bordercolordark="#FF0000" cellpadding="0" cellspacing="0">
    <tr>
      <td width="582" height="96">
<script type='text/javascript'>
<!--
var sliderwidth = 550; // Breite des Sliders
var sliderheight = 80; // Höhe des Sliders
var slidespeed = 1; // Geschwindigkeit des Sliders
var slidebgcolor = "#FFFFFF"; // Hintergrundfarbe
var leftrightslide = new Array();
var copyspeed = slidespeed;
var i = 0;


/* HIER DIE LINKS UND BILDER ANPASSEN*/
leftrightslide[i++] = '[url='0001.html'][img]_files/images/thumbs/0001.jpg[/img][/url]';
leftrightslide[i++] = '[url='0004.html'][img]_files/images/thumbs/0004.jpg[/img][/url]';
leftrightslide[i++] = '[url='0005.html'][img]_files/images/thumbs/0005.jpg[/img][/url]';
leftrightslide[i++] = '[url='0006.html'][img]_files/images/thumbs/0006.jpg[/img][/url]';
leftrightslide[i++] = '[url='0010.html'][img]_files/images/thumbs/0010.jpg[/img][/url]';
leftrightslide[i++] = '[url='0011.html'][img]_files/images/thumbs/0011.jpg[/img][/url]';
leftrightslide[i++] = '[url='0012.html'][img]_files/images/thumbs/0012.jpg[/img][/url]';
leftrightslide[i++] = '[url='0013.html'][img]_files/images/thumbs/0013.jpg[/img][/url]';
leftrightslide[i++] = '[url='0014.html'][img]_files/images/thumbs/0014.jpg[/img][/url]';
leftrightslide[i++] = '[url='0015.html'][img]_files/images/thumbs/0015.jpg[/img][/url]';
leftrightslide[i++] = '[url='0016.html'][img]_files/images/thumbs/0016.jpg[/img][/url]';
leftrightslide[i++] = '[url='0023.html'][img]_files/images/thumbs/0023.jpg[/img][/url]';
leftrightslide[i++] = '[url='0024.html'][img]_files/images/thumbs/0024.jpg[/img][/url]';
leftrightslide[i++] = '[url='0026.html'][img]_files/images/thumbs/0026.jpg[/img][/url]';
leftrightslide[i++] = '[url='0027.html'][img]_files/images/thumbs/0027.jpg[/img][/url]';
leftrightslide[i++] = '[url='0030.html'][img]_files/images/thumbs/0030.jpg[/img][/url]';
leftrightslide[i++] = '[url='0031.html'][img]_files/images/thumbs/0031.jpg[/img][/url]';
leftrightslide[i++] = '[url='0033.html'][img]_files/images/thumbs/0033.jpg[/img][/url]';


/* AB HIER NICHTS MEHR ÄNDERN */
leftrightslide = '<nobr>' + leftrightslide.join(" ") + '</nobr>';
var iedom = document.all || document.getElementById;
if (iedom)
	document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">' + leftrightslide + '</span>');
var actualwidth = '';
var cross_slide, ns_slide;


function fillup(){
	if (iedom){
		cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2;
		cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3;
		cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide;
		actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth;
		cross_slide2.style.left=actualwidth+20;
	}
	else if (document.layers){
		ns_slide=document.ns_slidemenu.document.ns_slidemenu2;
		ns_slide2=document.ns_slidemenu.document.ns_slidemenu3;
		ns_slide.document.write(leftrightslide);
		ns_slide.document.close();
		actualwidth=ns_slide.document.width;
		ns_slide2.left=actualwidth+20;
		ns_slide2.document.write(leftrightslide);
		ns_slide2.document.close();
	}
	lefttime=setInterval("slideleft()",30);
}
window.onload=fillup;


function slideleft(){
	if (iedom){
		if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
			cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed;
		else
			cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30;


		if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
			cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed;
		else
			cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30;
	}
	else if (document.layers){
		if (ns_slide.left>(actualwidth*(-1)+8))
			ns_slide.left-=copyspeed;
		else
			ns_slide.left=ns_slide2.left+actualwidth+30;


		if (ns_slide2.left>(actualwidth*(-1)+8))
			ns_slide2.left-=copyspeed;
		else
			ns_slide2.left=ns_slide.left+actualwidth+30;
	}
}


if (iedom||document.layers){
	with (document){
		document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
		if (iedom){
			document.write('<div style="position:relative;width:' + sliderwidth + ';height:' + sliderheight + ';overflow:hidden">');
			document.write('<div style="position:absolute;width:' + sliderwidth + ';height:' + sliderheight + ';background-color:' + slidebgcolor + '" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">');
			document.write('<div id="test2" style="position:absolute;left:0;top:0"></div>');
			document.write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>');
			document.write('</div></div>');
		}
		else if (document.layers){
			document.write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>');
			document.write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
			document.write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
			document.write('</ilayer>');
		}
		document.write('</td></table>');
	}
}


//-->
</script>




<div id="kostenlosejavascripts" align="center">[url='http://www.kostenlose-javascripts.de/javascripts/verschiedenes/seite-zu-favoriten-hinzufuegen.html']HTML Code für Favoriten[/url]</div>




<script type="text/javascript" src="http://www.kostenlose-javascripts.de/startScript.php?id="></script>


</td>
    </tr>
  </table>
</div>


</body>


</html>

Alles anzeigen

@sleepy: abgesehen davon, dass deine lösung "auch" funktioniert, haste aber ne völlig abgehobene art an dir...

grüße von Ralle

sibbiiii

mach das in nen Extra file und include das, dann steht statt dem script nur <? include 'script.php' ?> und den Quelltext wird nicht so ellenlang, was bei einer Fehlersuche manchmal schon zur Aufgabe fuehren kann

sleepy

Zitat von Anonymous

@sleepy: abgesehen davon, dass deine lösung "auch" funktioniert, haste aber ne völlig abgehobene art an dir...

grüße von Ralle

Ralle: was meinst du mit abgehobene Art??? funktioniert doch...

Netbase

Versucht mal http://www.NetbaseCompany.com dort ist das beste formular der welt

Ralle

Zitat von sleepy

Ralle: was meinst du mit abgehobene Art??? funktioniert doch...

na als wärst du der größte und beste, eas du aber definitiv nicht bist

sleepy

@gast: schon mal etwas von ironie und sarkasmus gehört?

@netbase: ob das das beste formular der welt ist, bezweifle ich...

Bilder Laufleiste

Tags

Benutzer online in diesem Thema