Classic Ticker: Kostenlose DHTML und JavaScript Text Animationen

Classic Ticker

Ticker sind was Feines, um angejahrten News einen aktuellen Touch zu verleihen. Dieser Ticker tickt selbstverständlich auch in Ihren Hausfarben und in Ihrer Hausschrift. Jede Nachricht lässt sich separat verlinken. Funktioniert mit IE 5x/6x. NS 6x/7x und anverwandte Browser zeigen Ihr Nachrichten ohne Tickerei. Weitere kostenlose Scripts gibt's auf www.fabulant.com

Installation

Schritt 1: Öffnen Sie die Webpage, in die Sie den Classic Ticker einbinden möchten. Benutzen Sie dazu einen simplen Texteditor wie z.B. NotePad oder WordPad.

Schritt 2: Fügen Sie den folgenden Codedort ein, wo Sie den Classic Ticker platzieren möchten:

<table border=0 cellpadding=0 cellspacing=0>
<tr><td width=200 height=100 valign=top>
<SCRIPT>
// CREDITS:
// Power Ticker
// By Peter Gehrig
// Copyright (c) 2002 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// info@24fun.com
// 8/31/2002

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

var text=new Array()
var textlink=new Array()
var texttarget=new Array()

/////////////////////////////////////////////////////////////////////
// Unterhalb dieser zwei Linien beginnt die Editierzone
// Bestimmen Sie die Eigenschaften der Text Animation
////////////////////////////////////////////////////////////////////

// Tragen Sie unten Ihre Nachrichten ein. 
// Wer mit JavaScript klar kommt, kann auch HTML Tags einbinden, wie in den Beispielen.
// Aber Vorsicht: nicht alle HTML-Tags führen zu den gwüschten Lösungen.
text[0]="<strong>Vermisstenmeldung</strong><br>Vermisst wird seit letzter Woche Guter Kunde. Guter Kunde ist circa 180 cm gross und zig Millionen schwer."

text[1]="<strong>Signalement</strong><br>Guter Kunde hat graue schüttere Werbung, ein korpulentes Werbebudget und offene Ohren für darbende Texter. Um schonendes Anhalten wird gebeten."

text[2]="<strong>Weiteres Vorgehen</strong><br>Sachdienliche Mitteilungen sind weiterzuleiten an <em>Peter Gehrig</em> oder an jede andere Werbedienststelle."

text[3]="<strong>Belohnung</strong><br>Für Hinweise, die zur Auffindung des Vermissten führen, ist eine Flasche Champagner ausgesetzt."

// Setzen Sie für jede Meldung einen Link.
// Falls Sie keinen Link setzen wollen, fügen Sie 
// anstelle eines URLs einfach ein "#" ein
textlink[0]="http://www.petergehrig.ch"
textlink[1]="http://www.petergehrig.ch"
textlink[2]="http://www.petergehrig.ch"
textlink[3]="http://www.petergehrig.ch"

// Bestimmen Sie für jede link ein Zielfenster.
// Mögliche Werte sindb "_blank","_top", "_self", "_parent" oder der Name eines Frames
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_parent"
texttarget[3]="_top"

// Bestimmen Sie die Schrift
var textfont="Arial"

// Bestimmen Sie die Schriftfarbe
var textfontcolor="#000000"

// Bestimmen Sie die Rolloverfarbe (Farbe, wenn Maus über Text fährt)
var textfontcolorrollover="#ff0000"

// Bestimmen Sie die Schriftgrösse
var textfontsize=8

// Tragen Sie unten "true" ein, falls der Text unterstrichen werden soll
// Tragen Sie unten "none" ein, falls der Text NICHT unterstrichen werden soll
var textdecoration="none"

// Legen Sie die Hintergrundfarbe fest
var textbgcolor="#FDCF15"

// Schreiben Sie "bold", wenn die Schrift fett sein soll
// Schreiben Sie "normal", wenn die Schrift NICHT fett sein soll
var textweight="normal"

// Schreiben Sie "italic", wenn die Schrift kursiv sein soll
// Schreiben Sie "normal", wenn die Schrift NICHT kursiv sein soll
var textitalic="normal"

// Bestimmen Sie unten die Breite und Höhe des Textscrollers (Pixels)
// GANZ WICHTIG: Tragen Sie Höhe und Breite AUCH in die zweite Linie 
// des eingefügten Codes ein, also dort, wo die Table-Zelle definiert wird
// Die zweite Linie, in der Sie Weite und Höhe anpassen müssen, sieht so aus:
// <tr><td width=200 height=100 valign=top>
var textwidth=200
var textheight=100

// Legen Sie die Pause zwischen den einzelnen Nachrichten fest (Sekunden)
var textpause=2

// Bestimmen sie die Dicke des Randes (Pixel)
// Falls Sie keinen Rand wünschen tragen Sie einfach eine 0 ein
var textborder=1

// Bestimmen Sie die Farbe des Randes
var textbordercolor="#000000"

// Legen Sie das Tickertempo fest (höherer Wert = langsameres Tempo)
var speed=40

/////////////////////////////////////////////////////////////////////
// Hier endet die Editierzone
// Bitte ändern Sie den nachfolgenden Programmiercode nur,
// wenn Sie ein geübter JavaScripter sind.
/////////////////////////////////////////////////////////////////////

var textalign="left"
var textvalign="top"
var textitalicA=""
var textitalicB=""
var textweightA=""
var textweightB=""
var textfontsizeHTML=1
var i_mes=0

var i_substring=0
var i_presubstring=0
var i_text=0
var textcontent=""
var notag=true
var textpresubstring=""
var textaftersubstring=""
textpause*=1000

var browserinfos=navigator.userAgent 
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function showtickerNS6() {
	textcontent="<table border=0 cellpadding=4 width="+textwidth+" height="+textheight+"><tr valign="+textvalign+"><td align="+textalign+">"
	textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
	textcontent+=text[i_text]
	textcontent+="</a>"
	textcontent+="</td></tr></table>"
	document.getElementById("ticker").innerHTML=textcontent
	i_text++
	if (i_text>=text.length-1) {i_text=0}
	var timer=setTimeout("showtickerNS6()", 2*textpause)
}

function showticker() {
	if (i_substring<=text[i_text].length) {
			i_substring++
			i_presubstring=i_substring-1
			if (i_presubstring<0) {i_presubstring=0}
			gettextcontent()
		if (ie4) {
			ticker.innerHTML=textcontent
			var timer=setTimeout("showticker()", speed)
		}
		if (ie5 || opera) {
			document.getElementById("ticker").innerHTML=textcontent
			var timer=setTimeout("showticker()", speed)
		}
	}
	else {
		clearTimeout(timer)
		var timer=setTimeout("changetext()", textpause)
	}
}

function changetext() {
	i_substring=0
	i_presubstring=0
	i_text++
	if (i_text>text.length-1) {
		i_text=0
	}
	showticker()
}

if (ie5 || ns6 || opera) {
	if (ns6) {
		textwidth-=2*textborder
		textheight-=2*textborder
	}
	document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+textborder+'px;border-color:'+textbordercolor+';background-color:'+textbgcolor+'">')
	document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;width:'+textwidth+'px;height:'+textheight+'px;"></span>')
	document.write('</div>')
}

if (ie4 || ie5 || opera) {window.onload=showticker}
if (ns6) {window.onload=showtickerNS6}
</script>
</td></tr></table>

Schritt 3: Konfigurieren Sie die Schriftattribute, Grösse, Farben etc. im oberen Teil des Codes, den Sie soeben eingefügt haben.

Schritt 4: Beten Sie!

back