JavaScript background rollover effect for textlinks

» 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

Fullpage rollover effect for textlinks
This script creates a unique fullpage opacity rollover effect for textlinks. You may set each link to a different color-effect. Fast loading. Very easy configuration. IE 5x/6x/7x/8x, FF 2x/3x, Opera 7x/8x/9x/10x and Google Chrome 3x/4x. Brought to you by www.fabulant.com

Test the script
Just move your mouse over this short link or put it
over this very long textlink to test the highlight effect.

Configuration

Step 1: Open your webpage. Insert the below code immediately above the </body> tag:

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

// set the opacity (transparency). Accepted value: 0 - 100. A low value results in a high transparency
var opacitygrade=70

// paddingzone around the link (px)
var paddingzone=4

// Do not edit the code below
var i_fadestrength
var linktop
var linkposbottom
var linkleft
var linkposright
var thislink
var screenwidth
var screenheight

function showlines(animatedlink,bgcol) {
    thislink=animatedlink
	 
	screenwidth=parseInt(document.body.clientWidth)
	screenheight=parseInt(document.body.clientHeight)

linktop=thislink.offsetParent.offsetTop
	linkposbottom=linktop+thislink.offsetParent.offsetHeight
	linkleft=thislink.offsetParent.offsetLeft
	linkposright=linkleft+thislink.offsetParent.offsetWidth
  
	document.getElementById('linetopimg').style.left=0
	document.getElementById('linetopimg').style.top=0
	document.getElementById('linetopimg').style.width=screenwidth
	document.getElementById('linetopimg').style.height=linktop-paddingzone
	
	document.getElementById('lineleftimg').style.left=0
	document.getElementById('lineleftimg').style.top=linktop-paddingzone
	document.getElementById('lineleftimg').style.width=linkleft-paddingzone
	document.getElementById('lineleftimg').style.height=thislink.offsetParent.offsetHeight+2*paddingzone

document.getElementById('linerightimg').style.left=linkleft+thislink.offsetParent.offsetWidth+paddingzone
	document.getElementById('linerightimg').style.top=linktop-paddingzone
	document.getElementById('linerightimg').style.width=screenwidth-(linkleft+thislink.offsetParent.offsetWidth+paddingzone)
	document.getElementById('linerightimg').style.height=thislink.offsetParent.offsetHeight+2*paddingzone
	
	document.getElementById('linebottomimg').style.left=0
	document.getElementById('linebottomimg').style.top=linktop+thislink.offsetParent.offsetHeight+paddingzone
	document.getElementById('linebottomimg').style.width=screenwidth
	document.getElementById('linebottomimg').style.height=screenheight-(linktop+thislink.offsetParent.offsetHeight)
	
	document.getElementById('linetopimg').style.backgroundColor=bgcol
	document.getElementById('lineleftimg').style.backgroundColor=bgcol
	document.getElementById('linerightimg').style.backgroundColor=bgcol
	document.getElementById('linebottomimg').style.backgroundColor=bgcol
	
	if (document.all) {
		document.getElementById('linetopimg').filters.alpha.opacity=opacitygrade
		document.getElementById('lineleftimg').filters.alpha.opacity=opacitygrade
		document.getElementById('linerightimg').filters.alpha.opacity=opacitygrade
		document.getElementById('linebottomimg').filters.alpha.opacity=opacitygrade
	}
	
	else {
		document.getElementById('linetopimg').style.opacity=opacitygrade/100
		document.getElementById('lineleftimg').style.opacity=opacitygrade/100
		document.getElementById('linerightimg').style.opacity=opacitygrade/100
		document.getElementById('linebottomimg').style.opacity=opacitygrade/100
	}
	
	document.getElementById('linetopimg').style.visibility="visible"
	document.getElementById('lineleftimg').style.visibility="visible"
	document.getElementById('linerightimg').style.visibility="visible"
	document.getElementById('linebottomimg').style.visibility="visible"
}

function hidelines() {
    animation=false
    document.getElementById('linetopimg').style.visibility="hidden"
    document.getElementById('linebottomimg').style.visibility="hidden"
    document.getElementById('lineleftimg').style.visibility="hidden"
    document.getElementById('linerightimg').style.visibility="hidden"
}

document.write("<a span id='linetopimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=50);opacity:0.5'> </span>")
document.write("<a span id='linebottomimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=50);-opacity:0.5'> </span>")
document.write("<a span id='lineleftimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=50);opacity:0.5'> </span>")
document.write("<a span id='linerightimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=50);opacity:0.5'> </span>")
</script>

Step 2: Create your links, as shown below:

<span style="position:relative"><a href="http://www.yourlink.com" onMouseOver="showlines(this,'#FF0000')" onMouseOut="hidelines()">testlink</a></span>

green code: do not change the green code.
red code: the color of the expanding box.

Step 3: Go to the top of the script-code and configure padding-zone and transparency-effect.