<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript">
<!--
// Funktion zum Ein-/Ausblenden eines Bildes
function toggleImg(objImg, blnShow){
document.getElementById("imgOut").getElementsByTagName("img")[0].src = (blnShow)? objImg.src : "";
document.getElementById("imgOut").getElementsByTagName("img")[0].style.display = (blnShow)? "" : "none";
}
// Bild in PopUp öffnen
function popupImg(strUrl){
window.open(strUrl, "PopUp");
}
/* * * * * * * * * * * * * * * * D I E V A R I A B L E N * * * * * * * * * * * * * * * * * */
//°°°°°°°°°°Interval in ms
intInterval =50;
//°°°°°°°°°°Handler für Bilder
strImgHandler = ' onmouseover="clearInterval(objGo); toggleImg(this, true);" onmouseout="objGo=setInterval(\'DM_ticken()\','+intInterval+'); toggleImg(this, false);"';
//°°°°°°°°°°Die News (im onclick-Event können die Links eingetragen werden)
tNews=new Array();
tNews.push('<img src="bild1.gif" width="60" height="60" border="0" alt=""' + strImgHandler + ' onclick="popupImg(\'http://www.tutorials.de/\');">');
tNews.push('<img src="bild2.gif" width="60" height="60" border="0" alt=""' + strImgHandler + ' onclick="popupImg(\'http://www.tutorials.de/\');">');
tNews.push('<img src="bild3.gif" width="60" height="60" border="0" alt=""' + strImgHandler + ' onclick="popupImg(\'http://www.tutorials.de/\');">');
tNews.push('<img src="bild4.gif" width="60" height="60" border="0" alt=""' + strImgHandler + ' onclick="popupImg(\'http://www.tutorials.de/\');">');
tNews.push('<img src="bild5.gif" width="60" height="60" border="0" alt=""' + strImgHandler + ' onclick="popupImg(\'http://www.tutorials.de/\');">');
tNews.push('<img src="bild6.gif" width="60" height="60" border="0" alt=""' + strImgHandler + ' onclick="popupImg(\'http://www.tutorials.de/\');">');
//°°°°°°°°°°Laufrichtung(up,down,left,right)
strDir ='up';
//°°°°°°°°°°Delimiter zwischen den einzelnen News(nur bei left/right)
strDelimiter=' + + + ';
//°°°°°°°°°°Stop bei mouseover?true:false
blnStopHover=false;
//°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
intRepeat =2;
//°°°°°°°°°°Rahmen
strBorder ='1px solid #818181';
//°°°°°°°°°°Breite
intWidth =200;
//°°°°°°°°°°Höhe
intHeight =200;
//Abstand Rahmen->Inhalt
intPadding =4;
//Background-color
strBgc ='#515151';
//Text-color
strTxtc ='#ffffff';
//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="position: relative; '+strAlign+'overflow:hidden;background-color:'+strBgc+
';border:'+strBorder+';width:'+intWidth+'px;height:'+intHeight+'px;padding:'+intPadding+
'px;"><'+strNobr+'><div id="ticker"style="position:relative;color:'+strTxtc+';background-color:'+strBgc+
';"'+strStopHover+'>'+strNews+'</div></'+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 + "px";
//Positionswert hoch/heruntersetzen
intPos+=intStep*arrDir[strDir][0];
}
//Erneut ticken lassen
objGo=setInterval('DM_ticken()',intInterval);
}
//-->
</script>
<div id="imgOut">
<img src="" style="display: none;">
</div>
</body>
</html>
, laufen die Bilder als Endlosschleife ohne Versatz durch.
