Bilderfilmrolle ?

BastiS · 20. Februar 2005

Hallo,

ich würde gerne auf meiner Homepage so eine Art "Filmrolle" einbauen dh.

ich habe ca. 10 Bilder und möchte sie gerne in einem Kästchen ablaufen lassen immer wieder... und wenn man mit der Maus auf eins drauf geht, kann man das Bild anklicken...

wie geht sowas? Wo finde ich eine Anleitung oder vielleicht kann mir hier auch wer eine machen..

vielen Dank

BasTi

PS: muss man es mit java machen oder kann man es auch mit etwas anderen machen ?

Edit:
habe noch etwas gefunden:

<marquee bgcolor="#cccccc" border="0" align="middle" scrollamount="3" scrolldelay="0" behavior="scroll" width="200" height="30" style="font-family: Verdana, Arial, Helvetica, sans-serif; color: #689930; font-size: 10"><img src="bild.jpg"></marquee> <- also hiermit kann ich schonmal so ein bild scrollen.. nur kann man das auch von oben nach unten und kann man dann vielleicht auch eins anklicken ?

edit2:

Habe noch was gefunden:

http://www.all-electro.de/cgi-bin/bilderscroll/scroll.pl

sowas sollte es sein

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>bilderscroll</title>
</head>

<body bgColor="#008A18" text="#000000">

<script type="text/javascript">
 
var Bild0 = "../../cm-static/all_electro/images/bilderscroll/13.jpg";
 
var Bild1 = "../../cm-static/all_electro/images/bilderscroll/11.jpg";
 
var Bild2 = "../../cm-static/all_electro/images/bilderscroll/05.jpg";
 
var Bild3 = "../../cm-static/all_electro/images/bilderscroll/04.jpg";
 
var Bild4 = "../../cm-static/all_electro/images/bilderscroll/12.jpg";
 
var Bild5 = "../../cm-static/all_electro/images/bilderscroll/08.jpg";
 
var Bild6 = "../../cm-static/all_electro/images/bilderscroll/02.jpg";

Bild = new Array (Bild0,Bild1,Bild2,Bild3,Bild4,Bild5,Bild6);
Hoehe = new Array (180,210,155,162,211,152,210);


	// Holen der Bilder
	var start = 0;
	for (var j=0;j<Bild.length;j++) {
		start = start + Hoehe[j];
		}
	
	var startY 	= start*-1;
	var maxY		= 800;
	var Abstand	= 20;
	VarY = startY;
	for (var i=0;i<Bild.length;i++) {
		var Ausgabe = ' ';
		Ausgabe += '<table>';
		Ausgabe += '<tr>';
		Ausgabe += '<td width="25">&nbsp;</td>';
		Ausgabe += '<td><div id="bildDiv'+i+'" style="position:absolute; top:'+VarY+'px;"><a href=http://www.all-electro.de/html/all_nl_produkte_rubrik_rubrik-8_lang-d_pfad-all_electro_startseite-.htm border=0 target=autodaten><img src= '+Bild[i]+' width="140" border="0"></a></div></td>';
		Ausgabe += '</tr>';
		Ausgabe += '</table>';
		document.write(Ausgabe);
		VarY = VarY + Abstand + Hoehe[i]; 
		}
	
	
	// Intervall
	var aktiv = window.setInterval("scroll()",15);
		
	function scroll() {
		for (var b=0;b<Bild.length;b++) {
			altesTop = document.getElementById("bildDiv"+b).style.top;
			neuesTop = altesTop.substring(0,altesTop.indexOf('px')) * 1;
			Top = neuesTop;
			neuesTop += 1;
			
			if (neuesTop > maxY) {
				for (var k=0;k<Bild.length;k++) {
					var PosAlt = document.getElementById("bildDiv"+k).style.top;
					var PosNeu = PosAlt.substring(0,PosAlt.indexOf('px')) * 1;
					if (PosNeu <= Top) { 
						Top = PosNeu;
						}
					}
				Top = Top - Abstand - Hoehe[b];
				neuesTop = Top;
				}		
			
			neuesTop += 'px'
			document.getElementById("bildDiv"+b).style.top = neuesTop;
			}
		}
</script>

</body>
</html>

nur jedes Bild sollte ein eigenen link haben geht sowas ?

Quaese · 20. Februar 2005

Hi,

Sven Mintel hat vor circa einem Jahr hier einen Ticker zur Verfügung gestellt. Den solltest du
an deine Bedürfnisse anpassen können.

ticker

Ciao
Quaese

BastiS · 20. Februar 2005

Hallo,

Danke für deine Antwort, nur kann man sowas nun auch von oben nach unten laufen lassen ?

habe hier mal dieses Java umgebaut und das ist bei raus gekommen:

scroll link

so sollte es aussehen NUR

müsste man jedes Bild einzelnt anklicken können und es sollte in einem Rahmen laufen !

ist doof zu erklären hoffe jemand weiß was ich genau will

vielen Dank !

EDIT: bei deinem link habe ich das gefunden text scroll dh. ich baue dieses mal um mit meinen Bildern...

EDIT: also habe es nun soweit geschafft wie ich es wollte!

nur wie mache ich das ganze zu einer endlos schleife ? erläd am ende immer das ganze wieder neu

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>bilderscroll</title>
    <style type="text/css">
<!--
.Stil1 {color: #00FF00}
-->
    </style>
</head>

<body bgColor="#000000" text="#000000">
<table border="0"><tr><td>
<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.tutorials.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test.jpg" border=0></a>');
tNews.push('<a href="http://www.tutorials.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test2.jpg" border=0></a>');
tNews.push('<a href="http://www.tutorials.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test3.jpg" border=0></a>');
tNews.push('<a href="http://www.tutorials.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test4.jpg" border=0></a>');
tNews.push('<a href="http://www.tutorials.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test5.jpg" border=0></a>');


    //°°°°°°°°°°Laufrichtung(up,down,left,right)
strDir      ='down';

    //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right)
strDelimiter=' + + + ';

    //°°°°°°°°°°Interval in ms
intInterval =25;

    //°°°°°°°°°°Stop bei mouseover?true:false
blnStopHover=true;

    //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
intRepeat   =1;

    //°°°°°°°°°°Rahmen
strBorder   ='0px solid #000000';

    //°°°°°°°°°°Breite
intWidth    =140;

    //°°°°°°°°°°Höhe
intHeight   =295;

    //Abstand Rahmen->Inhalt
intPadding  =0;

    //Background-color
strBgc      ='#000000';

    //Text-color
strTxtc     ='#ffffff';

    //Textausrichtung
strAlign    ='center';

    //Schritt pro Durchlauf(px)
intStep=2;



/* * * * * * * * * * * * * * * * * * 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)?'':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>
</td></tr></table>
<table border="0">
<tr>
<td><span class="Stil1">test
</span></td>
</tr>
</table>
</body>
</html>

BastiS · 20. Februar 2005

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>bilderscroll campus</title>
<!--
.Stil1 {color: #00FF00}
-->
    </style>
</head>

<body bgColor="#000000" text="#000000">
<table border="0"><tr><td>
<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.google.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test.jpg" border=0></a>');
tNews.push('<a href="http://www.tutorials.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test2.jpg" border=0></a>');
tNews.push('<a href="http://www.test.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test3.jpg" border=0></a>');
tNews.push('<a href="http://www.aldi.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test4.jpg" border=0></a>');
tNews.push('<a href="http://www.blackeg6.de"><img src="http://www.blackeg6.de/basti/homepage/campus/test5.jpg" border=0></a>');


    //°°°°°°°°°°Laufrichtung(up,down,left,right)
strDir      ='down';

    //°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right)
strDelimiter=' + + + ';

    //°°°°°°°°°°Interval in ms
intInterval =50;

    //°°°°°°°°°°Stop bei mouseover?true:false
blnStopHover=true;

    //°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
intRepeat   =2;

    //°°°°°°°°°°Rahmen
strBorder   ='0px solid #000000';

    //°°°°°°°°°°Breite
intWidth    =140;

    //°°°°°°°°°°Höhe
intHeight   =295;

    //Abstand Rahmen->Inhalt
intPadding  =0;

    //Background-color
strBgc      ='#000000';

    //Text-color
strTxtc     ='#ffffff';

    //Textausrichtung
strAlign    ='center';

    //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)?'':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>
</td></tr></table>
</body>
</html>

hab alles nun komplett fertig !

Scroll

BastiS · 21. Februar 2005

NEUES Problem:

wenn ich 2 mal diese Scrolls auf eine seite einbaue dann geht garnix

habe schon ein paar sachen umbenannt:

klick

aber weiß nicht mehr weiter bitte kann mir wer helfen ist sehr wichtig

Danke

Basti

Sven Mintel · 21. Februar 2005

Ein mal reicht doch wohl, oder? *closed*

Bilderfilmrolle ?

BastiS

Mitglied

Quaese

Moderator

BastiS

Mitglied

BastiS

Mitglied

BastiS

Mitglied

Sven Mintel

Mitglied

Neue Beiträge