Fun Ticker: Kostenlose DHTML und JavaScript Text Animationen

Fun Ticker

Bill Gates dürfte seine helle Freude haben an diesem Script: es läuft nur auf Win 98 oder höher und nur auf Internet Explorer 5x/6x. Das müsste ihm doch eine Kiste wert sein, verdammt!

Nicht-Explorer-User sehen eine drastisch abgespeckte Version.

Wer einen Mac hat, sieht gar nix. Weitere kostenlose Scripts gibt's auf www.fabulant.com

Installation

Schritt 1: Öffnen Sie die Webpage, die Sie mit einem Fun Ticker versehen möchten. Benutzen Sie am besten einen simplen Texteditor wie z.B. NotePad oder WordPad.

Schritt 2: Fügen Sie den folgenden Code dort ein, wo Sie den Fun Ticker haben wollen:

<table width=200 height=200 border=0 cellpadding=0 cellspacing=0>
<tr><td>
<SCRIPT>
// CREDITS:
// Fun Ticker
// By Peter Gehrig
// Copyright (c) 2004 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
// 2/5/2004

// 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()

/////////////////////////////////////////////////////////////////////
// EDITIER-ZONE BEGINNT HIER
////////////////////////////////////////////////////////////////////

// Tragen Sie unten soviele Nachrichten ein, wie Sie wollen.
// Aber immer dran denken: je kürzer desto würzer!
text[0]="HEY SIE!"
text[1]="LUST AUF"
text[2]="COOLE"
text[3]="SCRIPTS"
text[4]="OK!"
text[5]="BEDIENEN"
text[6]="SIE SICH."
text[7]="THAT"
text[8]="MAKES"
text[9]="ME"
text[10]="HAPPY!"

// Tragen Sie für jede Nachricht einen Link ein.
// Falls Sie eine Nachricht nicht verlinken möchten, schreiben Sie
// einfach "#" stattdessen. Siehe drittes Beispiel.
textlink[0]="http://www.petergehrig.ch"
textlink[1]="http://www.fabulant.com/downloadcenter/benchjs.benchjs.html"
textlink[2]="#"
textlink[3]="http://www.fabulant.com/downloadcenter/textanimatordemo/index.html"
textlink[4]="http://www.fabulant.com"
textlink[5]="http://www.petergehrig.ch"
textlink[6]="http://www.fabulant.com/downloadcenter/textanimatordemo/index.html"
textlink[7]="http://www.fabulant.com/downloadcenter/slideshowdemo/index.html"
textlink[8]="http://www.petergehrig.ch"
textlink[9]="http://www.fabulant.com/downloadcenter/benchjs.benchjs.html"
textlink[10]="http://www.petergehrig.ch"

// Tragen Sie ein Zielfenster für jeden Link ein
// Mögliche Werte: "_blank","_top", "_self", "_parent" oder der Name eines Frames
texttarget[0]="_blank"
texttarget[1]="_top"
texttarget[2]="_parent"
texttarget[3]="_self"
texttarget[4]="_blank"
texttarget[5]="_top"
texttarget[6]="_parent"
texttarget[7]="_self"
texttarget[8]="_self"
texttarget[9]="_self"
texttarget[10]="_self"

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

// Definieren Sie die Schriftfarben (Anzahl beliebig). 
// Hexadezimale Werte erforderlich!
var textfontcolor=new Array("#FF0000","#0000FF","#00FF00","#660000")

// Definieren Sie die Umrandungsfarben der Schrift (Anzahl beliebig). 
// Hexadezimale Werte erforderlich!
var outlinecolor=new Array("#000000","#000000","#FDCF15")

// Definieren Sie die Schattenfarben der Schrift (Anzahl beliebig). 
// Hexadezimale Werte erforderlich!
var shadowcolor=new Array("#FFFF00","#00FFFF","#FDCF15")

// Definieren Sie die Schriftfarbe für den Rollover-Effekt (nur für Netscape und Opera).
// Hexadezimale Werte erforderlich!
var textfontcolorrollover="#ff0000"

// Definieren Sie die Schriftgrösse in Pixels (nur für Netscape und Opera).
var textfontsize=20

// Bestimmen Sie die Hintergrundfarbe.
// Hexadezimale Werte erforderlich!
var textbgcolor="#000000"

// Schreiben Sie "bold" für fett oder "normal" für normal.
// (nur für Netscape und Opera)
var textweight="normal"

// Schreiben Sie "italic" für kursiv oder "normal" für normal.
// (nur für Netscape und Opera)
var textitalic="normal"

// Bestimmen Sie Breite und Höhe des Fun Tickers in Pixel.
// WICHTIG: Tragen Sie Breite und Höhe ZUSÄTZLICH im "Table" ein, 
// den Sie in der dritten Linie des Codes finden.
var textwidth=240
var textheight=180

// Bestimmen Sie die Pause zwischen den einzelnen Nachrichten (Sekunden).
var textpause=0.8

// Bestimmen Sie die Dicke des Randes der "Fun Ticker Box" in Pixel.
var funtickerborder=3

// Bestimmen Sie die Farbe des Randes der "Fun Ticker Box".
// Hexadezimale Werte erforderlich!
var funtickerbordercolor="#FDCF15"

// Bestimmen Sie die Dicke der Buchstabenumrandungen in Pixel.
var widthfontoutline=1

// Bestimmen Sie den Grad der Buchstaben-Transparenz.
var fontopacity="50%"

// Bestimmen Sie den Grad der Schatten-Transparenz.
var shadowopacity="50%"

// Tragen sie true ein, wenn Sie einen Buchstabenverlauf wünschen.
// Tragen sie false ein, wenn Sie keinen Buchstabenverlauf wünschen.
var applygradient=true

// Wählen Sie eine Verzerrform. Mögliche Werte: 0 - 3.
// Schreiben Sie 4, wenn Sie alle Verzerrformen einbinden möchten.
var i_shape=4

// Bestimmen Sie das Tempo der reinflitzenden Buchstaben.
// Je höher der Wert, um so langamer fliegen die Buchstaben ins Bild.
var speed=60

/////////////////////////////////////////////////////////////////////
// EDITIER-ZONE ENDET HIER
///////////////////////////////////////////////////////////////////

var path=new Array()
path[0]="m20 0c300 140,300 50,580, 0m20 300c400 100,300 250,580 300e"
path[1]="m20 100c300 -50,300 50,580, 100m20 200c300 400,300 300,580 200e"
path[2]="m20 120c300 100,300 50,580, 0m20 180c300 180,300 300,580 300e"
path[3]="m20 0c300 140,300 50,580, 0m150 300c400 100,300 250,450 300e"

var i_path=0
var textdecoration="none"

var innerwidth=Math.floor(0.90*textwidth)
var innerheight=Math.floor(0.90*textheight)

var posleft=Math.floor((textwidth-innerwidth)/2-funtickerborder)
var postop=Math.floor((textheight-innerheight)/2)

var i_message=0
var i_messagelength=0
var i_outlinecolor=0
var i_textfontcolor=0
var i_shadowcolor=0

var textalign="center"
var textvalign="middle"
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 showticker() {
	if (i_substring<=text[i_text].length) {
			i_substring++
			i_presubstring=i_substring-1
			if (i_presubstring<0) {i_presubstring=0}
			gettextcontent()
		if (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++
	i_textfontcolor++
	i_path++
	if (i_text>text.length-1) {i_text=0}
	if (i_textfontcolor>textfontcolor.length-1) {i_textfontcolor=0}
	showticker()
}

function changeform() {
	if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
	if (i_textfontcolor >= textfontcolor.length) {i_textfontcolor=0}
	if (i_shadowcolor >= shadowcolor.length) {i_shadowcolor=0}
	if (i_path>path.length-1) {i_path=0}
	document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
	document.getElementById('fillid').color=textfontcolor[i_textfontcolor]
	document.getElementById('shadowid').color=shadowcolor[i_shadowcolor]
	if (i_shape==path.length) {
		document.getElementById('shapeid').path=path[i_path]
	}
	if (i_message < text.length) {
		tick()
	}
	else {i_message=0;tick()}
}

function tick() {
	if (i_messagelength <= text[i_message].length) {
	
		var messagestringend=""
		var messagestring=text[i_message].substring(0, i_messagelength)+messagestringend
		document.getElementById('textpathid').string=messagestring
		var timer=setTimeout("tick()",speed)
		i_messagelength++
	}
	else {
		clearTimeout(timer)	
		var timer=setTimeout("prechangeform()",textpause)
	}
}

function prechangeform() {
	i_messagelength=0
	i_message++
	i_outlinecolor++	
	i_textfontcolor++	
	i_shadowcolor++	
	i_path++	
	changeform()
}

function openlink() {
	if (texttarget[i_message]=="_blank") {
		codepopup=window.open(textlink[i_message], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=770,height=460,top=10,left=10");
	} 
	else if (texttarget[i_message]=="_top") {
		top.location.href=textlink[i_text]
	} 
	else if (texttarget[i_message]=="_parent") {
		parent.location.href=textlink[i_text]
	} 
	else if (texttarget[i_message]=="_self") {
		document.location.href=textlink[i_text]
	} 
	else {
		var jumpto=eval("parent."+texttarget[i_text])
		jumpto.location.href=textlink[i_text]
	}
}

if (ie5) {
	document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+funtickerborder+'px;border-color:'+funtickerbordercolor+';background-color:'+textbgcolor+';cursor:hand" onClick="openlink()">')
	document.write('<v:shapetype id="shapeid" coordsize="600,320" path="'+path[i_shape]+'">')
	document.write('<v:path textpathok="t"/>')
	document.write('<v:textpath on="t" fitshape="t" xscale="t"/>')
	document.write('</v:shapetype>')
	document.write('<v:shape type="#shapeid" style="position:absolute; top:3px; left:'+posleft+'px; width:'+innerwidth+'px;height:'+innerheight+'px;" strokeweight="1pt">')
	if (applygradient) {
		document.write('<v:fill id="fillid" method="linear sigma" type="gradient" color="'+textfontcolor[i_textfontcolor]+'" opacity="'+fontopacity+'"/>')
	}
	else {
		document.write('<v:fill id="fillid" color="'+textfontcolor[i_textfontcolor]+'" opacity="'+fontopacity+'"/>')
	}
	document.write('<v:stroke id="strokeid" weight="'+widthfontoutline+'pt" color="'+outlinecolor[i_outlinecolor]+'"/>')

document.write('<v:shadow on="t" id="shadowid" opacity="'+shadowopacity+'" color="'+shadowcolor[i_shadowcolor]+'"/>')
	document.write('<v:textpath id="textpathid" style="font-family:\''+textfont+'\';v-text-kern:t" trim="t" fitpath="t" xscale="f" string="Hello World"/>')

document.write('</v:shape>')
	document.write('</div>')
}

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

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

Schritt 3: Fügen Sie den folgenden Code in den Head-Teil Ihrer Webpage ein:

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