Bilderlaufleiste mal anderst

B

Blacksceada

Grünschnabel
Hallo,

Ich habe das Problem das ich gerne eine Bilderlaufleiste haben würde in der sich die bilder nur bewegen wenn ich links oder rechts auf einen Button klicke. Sie sollten sich dann dem entsprechend nach links oder rechts bewegen und danach wieder stehn bleiben.

Habe mich auch schon versucht aber komme leider nicht weiter. Mein Code funktioniert leider nur im Firefox...

Hoffe ihr könnt mir Helfen.

Code: 
<html>
<head>
<script language="JavaScript">
<!--
function count() {
vorschau.stop();
}
-->
</script>
</head><body onload="setTimeout('count()', 6270)"><table width="96" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td><a href="#" title="Links" onMouseOver="vorschau.direction='left';" onMouseOut="vorschau.stop();"><img src="squadviewer_02.jpg" alt="" width="16" height="103" border="0" /></a></td>
			<td width="150"><marquee id="vorschau" height="95" scrollamount="2" scrolldelay="1" width="276"><img src="squadviewer_03.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_04.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_05.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_06.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_03.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_04.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_05.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_06.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_03.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_04.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_05.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_06.jpg" alt="" width="69" height="95" border="0" /></marquee></td>
			<td><a href="#" title="Rechts" onMouseOver="vorschau.direction='right';" onMouseOut="vorschau.stop();"><img src="squadviewer_07.jpg" alt="" width="15" height="95" border="0" /></a></td>
		</tr>
	</table>
</a>
</body>
</html>

Vielen Dank im Vorraus

Marcel
 
Zuletzt bearbeitet:
Hi,

versuch mal, die Laufschrift mit der Methode start zu starten, wenn die Maus über dem Bild ist.
Code: 
onmouseover="document.getElementById('vorschau').direction='left'; document.getElementById('vorschau').start();"
Ciao
Quaese
 
Vielen Dank erst mal, nun funktioniert es im Firefox sowie im Internet Explorer.
Das einzige ist das die Bilder beim IE wie gewünscht stehen bleiben und im FF nicht...

Und eine Frage hätte ich noch wie könnte ich das hinbekommen das die bilder bis in die mitte laufen und dann erst stehen bleiben? Gibt es die möglichkeit zu sagen das sich die bilder bewegen sollen bis sie auf einen Tabellenrahmen stoßen?

So soll es aussehen:

<| [BILD1][BILD2][BILD3][BILD4] |>

Hier noch mal der veränderte code:
Code: 
<html>
<head>
</head><body onload="vorschau.stop()"></body><table width="96" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td><a href="#" title="Links" onMouseOver="vorschau.direction='left'; vorschau.start();" onMouseOut="vorschau.stop();"><img src="squadviewer_02.jpg" alt="" width="16" height="103" border="0" /></a></td>
			<td width="150"><marquee id="vorschau" height="95" scrollamount="2" scrolldelay="1" width="276"><img src="squadviewer_03.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_04.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_05.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_06.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_03.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_04.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_05.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_06.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_03.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_04.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_05.jpg" alt="" width="69" height="95" border="0" /><img src="squadviewer_06.jpg" alt="" width="69" height="95" border="0" /></marquee></td>
			<td><a href="#" title="Rechts" onMouseOver="vorschau.direction='right'; vorschau.start();" onMouseOut="vorschau.stop();"><img src="squadviewer_07.jpg" alt="" width="15" height="95" border="0" /></a></td>
		</tr>
	</table>
</a>
</body>
</html>
 
Klasse Script.

Hab ich direkt mal auf meiner Seite verwendet.
Nur frage ich mich ob folgendes Möglich ist bzw. eher wie weil ist ja fast alles möglich:

  • Bilder werden alle von Anfang an angezeigt
  • Sie bewegen sich erst bei Mouseover auf die Links und nicht von Anfang an
  • Und entweder es gibt eine Endlosschleife oder die BIlder bewegen sich nicht weiter in eine Richtung wenn keine Bilder mehr da sind

Hoffe das geht mit marquee ohne ein langes Javascript.

MFG Daniel und schönen Abend noch

P.S. Lese die Bilder ja per PHP aus falls das irgendwie beeinflusst.
Wie die Seite bisher aussieht: Link
 
Zuletzt bearbeitet von einem Moderator:
Habe nun selbst ne Lösung zusammen bekommen.
Sie läuft komplett ohne marquee und falls einer so etwas sucht stelle ich sie hier mal bereit.

Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
function initPage()
{
oMyDiv = document.getElementById( "divname" );

isScrolling = false;

DX = 50; 
DELAY = 100;

};

function scroll2Left( evt )
{
	if ( evt )
		isScrolling = true;

	if ( isScrolling )
	{
		if ( oMyDiv.scrollLeft > 0 )
		{
			oMyDiv.scrollLeft -= DX;
			window.setTimeout( "scroll2Left()", DELAY );
		};
	};
};

function scroll2Right( evt )
{
		if ( evt )
			isScrolling = true;
		
		if ( isScrolling )
		{		
			oMyDiv.scrollLeft += DX;
			window.setTimeout( "scroll2Right()", DELAY );
		};

};

function stopScrolling()
{
	isScrolling = false;
}


</script>

</head>

<body onload="initPage()" onunload="stopScrolling()">
<div id="divname" style="width:700px;overflow:hidden;border:solid 2px black;white-space:nowrap;padding:4px">
--->Hier Bilder einfügen<---
</div>
<div style="font-size:32px"><span onmouseup="stopScrolling()" onmousedown="scroll2Left(event)">&lt;</span>&nbsp;<span onmouseup="stopScrolling()" onmousedown="scroll2Right(event)">&gt;</span>
</body>
</html>

Viel Spaß damit.

Daniel
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück