Fliegende News: Kostenlose DHTML und JavaScript Text Animationen

Fliegende Messages

Darauf müssen Ihre Kunden einfach fliegen. Grösse, Rand, Farbe, Schriftattribute, Speed etc. lassen sich leicht anpassen. Funktioniert mit IE5x/6x, NS4x/6x/7x. Weitere kostenlose Scripts gibt's auf www.fabulant.com

Installation

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

Schritt 2: Kopieren Sie den folgenden Code und fügen sie ihn direkt über den </body>-tag ein:

<SCRIPT>
// CREDITS:
// Floating and fadeing message boxes
// By Urs Dudli and Peter Gehrig
// Copyright (c) 2003 Peter Gehrig and Urs Dudli. 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/6/2003

// 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 Ihrer Text Animation
/////////////////////////////////////////////////////////////////////

// Tragen Sie Ihre Nachrichten ein.
// Jede Nachricht muss durch Anführungs- und Schlusszeichen eingerahmt werden
// Sie können soviele Nachrichten eingeben, wie Sie wollen
text[0]="INSERATE AB FR. 200.--"
text[1]="WERBERIEFE AB FR. 300.--"
text[2]="PROSPEKTE AB FR. 300.--"

// Jeder Ihrer Nachrichten muss ein Link zugeordnet werden
// Für Nachrichten, die nicht verlinkt werden sollen,  
// tragen Sie ein "#" anstelle eines URLS's ein (siehe Beispiel Mitte)
textlink[0]="http://www.fabulant.com"
textlink[1]="#"
textlink[2]="http://www.yahoo.com"

// Jedem Ihrer Links muss ein Zielfenster zugeordnet werden
// Mögliche Werte sind "_blank" (öffnet neues Fenster), 
// "_top" oder "_parent" (füllt das ganze Browser-Fenster)
// oder "_self" (lädt die Seite ins gleiche Frame wie der Link)
// Um ein bestimmtes Frame als Zielfenster zu nutzen, tragen Sie einfach den Namen des
// entsprechenden Frames ein (z.B. "main")
texttarget[0]="_blank"
texttarget[1]="_top"
texttarget[2]="_blank"

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

// Legen Sie fest, ob die Schrift "normal" oder "bold" (fett) sein soll
var textweight="bold"

// Bestimmen Sie die Schriftfarbe für den Rollover-Effekt
var textfontcolorrollover="#ff0000"

// Bestimmen Sie die Schriftgrösse (CSS-Werte)
var textfontsize=10

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

// Bestimmen Sie die Hintergrundfarbe der Textbox
var textbgcolor="#dddddd"

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

// Bestimmen Sie die Dicke des Randes (Pixel)
var textborder=2

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

var textdecoration="none"
var textfontsizeHTML=3
var textweightA="<b>"
var textweightB="</b>"
var textitalic="normal"
var textitalicA=""
var textitalicB=""
var textredirurl="http://"
var textalign="center"
var textvalign="middle"

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

getcontent()
function getcontent() {
	for (i=0;i<=numberofmessages;i++) {
		var content=""
		if (ie4 || ie5 || ns6 || opera) {	
			content="<table cellpadding="+textborder+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
			content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\"><nobr>"
			content+=text[i]
			content+="</nobr></a></td></tr></table>"
		}
		else {	
			content="<table cellpadding="+textborder+" cellspacing=0 bgcolor="+textbgcolor+" border="+textborder+"><tr valign="+textvalign+"><td align="+textalign+">"
			content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\">"
			content+=textweightA
			content+=textitalicA
			content+="<font face=\""+textfont+"\" size="+textfontsizeHTML+" color=\""+textfontcolor+"\">"
			content+=text[i]
			content+="</font>"
			content+=textitalicB
			content+=textweightB
			content+="</a></td></tr></table>"
		}
		spancontent[i]=content
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	checkposition()
	movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

}

function checkposition() {
	if (ie4 || ie5) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=eval("document.all.span"+i+".style")
			if (thisspan.posLeft>marginright-boxwidth[i]-floatingspeed) {
				thisspan.posLeft-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.posLeft<marginleft) {
				thisspan.posLeft+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.posTop>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.posTop-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.posTop<margintop) {
				thisspan.posTop+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	if (ns4) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=eval("document.span"+i)
			if (thisspan.left>marginright-boxwidth[i]-floatingspeed) {
				thisspan.left-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.left<marginleft) {
				thisspan.left+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.top>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.top-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.top<margintop) {
				thisspan.top+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	
	if (ns6 || opera) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=document.getElementById('span'+i).style
			var leftx=parseInt(thisspan.left)
			var topy=parseInt(thisspan.top)
			if (leftx>marginright-boxwidth[i]-floatingspeed) {
				thisspan.left=leftx-Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (leftx<marginleft) {
				thisspan.left=leftx+Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (topy>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.top=topy-Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (topy<margintop) {
				thisspan.top=topy+Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}

if (ie4 || ie5 || ns6 || opera) {	
	for (i=0;i<=numberofmessages;i++) {
    	document.write("<span id='span"+i+"' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0;border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";'></span>")
    	document.close()
	}
}
if (ns4) {
	for (i=0;i<=numberofmessages;i++) {
    	document.write("<layer name='span"+i+"' left=0 top=0>"+spancontent[i]+"</layer>")
    	document.close()
	}
}
window.onload=setValues
</script>
<div style="position:absolute;top:0px;left:0px;visibility:hidden">hide me</div>

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

back