Link Ticker: free JavaScript rollover ticker

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Link Ticker: JavaScript rollover ticker
his free crossbrowser JavaScript creates rollover tickers for your links. Just move your cursor over any link and the link ticker will appear and display additional informations about the link. Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Test it
Move your cursor over the textlinks:
Script description Advantages of the script

Configuration:

Step 1: Open your webpage that will display your link tickers. Insert the following code right above the</body>-tag (almost at the bottom of webpage).

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you have to insert a link to http://www.fabulant.com right into the webpage where the script
// will be displayed.

// width of the ticker (pixels)
var tickerwidth=200

// height of the ticker (pixels)
var tickerheight=90

// distance from the messagetext to the tickermargin (pixels)
var tickerpadding=8

// borderwidth of the ticker (pixels)
var borderwidth=4

// enter "solid" or "dotted"
var borderstyle="solid"

// bordercolor
var bordercolor="orange"

// font-family
var fnt="Verdana"

// font-size of the text
var fntsize=8

// font-size of the last letter of the ticker
var fntsizelastletter=8

// font-color of the text
var fntcolor="#FFFF00"

// font-color of the last letter of the ticker
var fntcolorlastletter="orange"

// font-weight. Set a value between 1 to 9 to adjust the boldness
var fntweight=3

// backgroundcolor
var backgroundcolor="#000000"

// standstill between the messages (microseconds)
var standstill=2000

// speed (a higher value will slow down the ticker)
var speed=40

// horizontal distance from the textlink to the ticker (pixels)
var xdistance=0

// vertical distance from the textlink to the ticker (pixels)
var ydistance=0

// Do not edit the variables below
var timer
var topposition=0
var leftposition=0
var x,y
var i_substring=0
var i_presubstring=0
var i_message=0
var message
var messagecontent=""
var messagebackground=""
var messagepresubstring=""
var messageaftersubstring=""
fntweight=fntweight*100

function getmessagebackground() {
		messagebackground="<table style='border-width:"+borderwidth+"px;border-color:"+bordercolor+";border-style:"+borderstyle+";' width="+tickerwidth+" height="+tickerheight+" cellspacing=0 cellpadding=0><tr><td valign=top bgcolor='"+backgroundcolor+"'>"
		messagebackground+=" </td></tr></table>"
}

function getmessagecontent() {	
		messagecontent="<table border=0 cellspacing=0 cellpadding="+tickerpadding+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top>"
		messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+";'>"	
		messagecontent+="<font color='"+fntcolor+"'>"
		messagecontent+=messagepresubstring
		messagecontent+="</font>"
		messagecontent+="</span>"
		messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsizelastletter+"pt;font-weight:"+fntweight+";'>"	
		messagecontent+="<font color='"+fntcolorlastletter+"'>"
		messagecontent+=messageaftersubstring
		messagecontent+="</font>"
		messagecontent+="</span>"
		messagecontent+="</td></tr></table>"
}

function showticker() {
	if (i_substring<=message.length-1) {
			i_substring++
			i_presubstring=i_substring-1
			if (i_presubstring<0) {i_presubstring=0}
            messagepresubstring=message.substring(0,i_presubstring)
	        messageaftersubstring=message.substring(i_presubstring,i_substring)
			getmessagecontent()
			ticker.innerHTML=messagecontent
			timer=setTimeout("showticker()", speed)

}
	else {
		clearTimeout(timer)
	}
}

function hideticker() {
    clearTimeout(timer)
    i_substring=0
	i_presubstring=0

document.getElementById('ticker').style.visibility="hidden"
    document.getElementById('tickerbg').style.visibility="hidden"
}

function showmessage(linkmessage) {
    getmessagebackground()
    message=linkmessage
   
	i_substring=0
	i_presubstring=0
    leftposition=x+xdistance
    topposition=y+ydistance

document.getElementById('ticker').style.left=leftposition
	document.getElementById('ticker').style.top=topposition
	document.getElementById('tickerbg').style.left=leftposition
	document.getElementById('tickerbg').style.top=topposition
	tickerbg.innerHTML=messagebackground
    document.getElementById('ticker').style.visibility="visible"
    document.getElementById('tickerbg').style.visibility="visible"
	showticker()
}

function handlerMM(e){
	x = (!document.all) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (!document.all) ? e.pageY : document.body.scrollTop+event.clientY
}

document.write('<DIV ID="tickerbg" style="position:absolute;width:'+tickerwidth+'px;height:'+tickerheight+'px;>"></DIV>')
document.write('<DIV ID="ticker" style="position:absolute;width:'+tickerwidth+'px;height:'+tickerheight+'px;"></DIV>')

document.onmousemove = handlerMM;
</script>

Step 2: Go to the top of the script and configure messages, links, font-attributes, colors, border, size and speed.

Step 3: Configure your links as seen below:

<a href="http://www.fabulant.com" onMouseOver="showmessage('Download free JavaScript slideshows, tickers, scrollers, background scripts and much more.')" onMouseOut="hideticker()">www.fabulant.com</a>

Embed the red and blue code into your links
Configure your message (red code)