LinkExploder: JavaScript rollover fireworks for your links

» 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 Exploder animation: the rollover fireworks for your links
Our most popular link rollover firework animation has been improved and simplified! This fun JavaScript images requires no images! You create the sparkles with simple letters and words. Easy step-by-step configuration. Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x/11x, Chrome 4x/5x/6x/7x/8x/9x.

Test the script
Move your mouse over this textlink or move it over this textlink or move it over this textlink and experience a sparkling effect.

Configuration

Step 1: Open your webpage and paste the following code right above the </body> tag:

<script>
// CREDITS:
// LinkExploder by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Similar scripts can be found at http://www.fabulant.com.

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

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////
		
// Set the number of sparkles. Add or remove as many as you like.    
var sparklenumber=20

// Set the fonts that create the sparkles. Add or remove as many as you like.
var sparklefont=new Array("Arial","Times","Comic Sans MS")

// Set the sizes of sparkles (pt). Add or remove as many as you like.
var sparklesize=new Array(5,10,15,20)

// Set colors of sparkles. Add or remove as many as you like.
var sparklecolor=new Array("#FF0000","#0000FF","#00FF00","#000000")

// Set the speed (higher=slower)
var speed=20

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var sparklesizeNS4=new Array()
var x_sparklepos
var y_sparklepos
var x,y
var x_random=new Array()
var y_random=new Array()
var max_explsteps=80
var i_explsteps=0
var i_color=0
var i_size=0
var i_font=0
var marginbottom
var marginright
var sparklewidth=20
var sparkleheight=20
var isloaded=false

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

function initlinkexploder() {
	isloaded=true
}

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

document.onmousemove=handlerMM;

document.write("<style>")
document.write(".spanstyle {")
document.write("position:absolute;")
document.write("visibility:hidden;")
document.write("}")
document.write("</style>")

for (i=0;i<=sparklenumber;i++) {
   	document.write("<div id='span"+i+"' class='spanstyle' style='font-family:"+sparklefont[i_font]+";font-size:"+sparklesize[i_size]+"pt;color:"+sparklecolor[i_color]+";'>")
	document.write(".")
	document.write("</div>")
	i_color++;i_font++;i_size++;
	if (i_color>=sparklecolor.length) {i_color=0}
	if (i_font>=sparklefont.length) {i_font=0}
	if (i_size>=sparklesize.length) {i_size=0}
}
if (browserok) {
	window.onload=initlinkexploder
}
</script>

IMPORTANT: Do not paste the code into tables or <DIV> and </DIV> tags or inside any other container tags!

Step 2: Open your webpage and put the red code into any textlink or imagelink:

<a href="http://www.google.com" onMouseOver="startexplosion('love')">my link</a>

Replace the the blue word (love) with a word or letter of your choice. Take care that the brackets remain as in this sample!

Step 3: Open your webpage and configure the speed as well as the sizes, colors, fonts and numbers of the sparkles.