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. Internet Explorer 5x/6x/7x/8x/9x, Firexfox 2x/3x, Opera 7x/8x/9x/10x/11x, Chrome 3x/4x/5x/6x/7x/8x/9x. 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:

<script>
// CREDITS:
// Fullpage rollover animation for textlinks and images
// by Peter Gehrig 
// Copyright (c) 2010 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

// 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+"px"
	document.getElementById('linetopimg').style.top=0+"px"
	document.getElementById('linetopimg').style.width=screenwidth+"px"
	document.getElementById('linetopimg').style.height=(linktop-paddingzone)+"px"
	
	document.getElementById('lineleftimg').style.left=0+"px"
	document.getElementById('lineleftimg').style.top=(linktop-paddingzone)+"px"
	document.getElementById('lineleftimg').style.width=(linkleft-paddingzone)+"px"
	document.getElementById('lineleftimg').style.height=(thislink.offsetParent.offsetHeight+2*paddingzone)+"px"

document.getElementById('linerightimg').style.left=(linkleft+thislink.offsetParent.offsetWidth+paddingzone)+"px"
	document.getElementById('linerightimg').style.top=(linktop-paddingzone)+"px"
	document.getElementById('linerightimg').style.width=(screenwidth-(linkleft+thislink.offsetParent.offsetWidth+paddingzone))+"px"
	document.getElementById('linerightimg').style.height=(thislink.offsetParent.offsetHeight+2*paddingzone)+"px"
	
	document.getElementById('linebottomimg').style.left=0+"px"
	document.getElementById('linebottomimg').style.top=(linktop+thislink.offsetParent.offsetHeight+paddingzone)+"px"
	document.getElementById('linebottomimg').style.width=screenwidth+"px"
	document.getElementById('linebottomimg').style.height=(screenheight-(linktop+thislink.offsetParent.offsetHeight))+"px"
	
	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.