JavaScript Rollover Animation: highlight 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

JavaScript rollover animation: highlight effect for textlinks
This script creates a unique rollover animation for textlinks. The smooth zoom-in-zoom-out effect requires almost no bandwidth. You may set each link to a different color and a different borderwidth. True copy and paste installation. No images required. Very easy configuration. Internet Explorer 5x/6x/7x/8x/9x, Firefox 2x/3x/4x, 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:
// 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.

// Do not edit the code below
var maxborder_thickness
var border_thickness
var i_fadestrength
var i_fadestrengthstep
var linktop
var linkposbottom
var linkleft
var linkposright
var linewidth
var lineheight
var animatedlink
var animatedcolor
var interval=50
var plusorminus=1
var thislink
var timer

function showlines(animatedlink,animatedbordercolor,maxwidth) {
     thislink=animatedlink
     thisbordercolor=animatedbordercolor
     maxborder_thickness=maxwidth
     border_thickness=1
     i_fadestrength=100;
     i_fadestrengthstep=Math.floor(100/maxborder_thickness)
     animation=true
	 document.getElementById('linetopimg').style.visibility="visible"
     document.getElementById('linebottomimg').style.visibility="visible"
     document.getElementById('lineleftimg').style.visibility="visible"
     document.getElementById('linerightimg').style.visibility="visible"
     doanimation()
}

function doanimation() {
    if (animation) {
        if (border_thickness>=maxborder_thickness || border_thickness<1) {
            plusorminus*=-1
        }
        border_thickness+=plusorminus
        i_fadestrength=100-(i_fadestrengthstep*border_thickness)
        border_color=thisbordercolor
        linktop=parseInt(thislink.offsetParent.offsetTop+"px")
        linkposbottom=parseInt(linktop+thislink.offsetParent.offsetHeight+"px")
        linkleft=parseInt(thislink.offsetParent.offsetLeft+"px")
        linkposright=parseInt(linkleft+thislink.offsetParent.offsetWidth+"px")
    
        linewidth=linkposright-linkleft+(4*border_thickness) 
        lineheight=linkposbottom-linktop+(4*border_thickness)
		border_thickness=parseInt(border_thickness)

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"
}

if (document.all) {
    document.write("<a span id='linetopimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>")
    document.write("<a span id='linebottomimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>")
    document.write("<a span id='lineleftimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>")
    document.write("<a span id='linerightimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>")
}
else {
    document.write("<a span id='linetopimg' style='position:absolute;top:0px;left:0px;opacity:1'> </span>")
    document.write("<a span id='linebottomimg' style='position:absolute;top:0px;left:0px;opacity:1'> </span>")
    document.write("<a span id='lineleftimg' style='position:absolute;top:0px;left:0px;opacity:1'> </span>")
    document.write("<a span id='linerightimg' style='position:absolute;top:0px;left:0px;opacity:1'> </span>")
}
</script>

Step 2: Create your links, as shown in the grey box below:

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

green code: do not change the green code.
red code: set the color of the expanding box.
blue code: set the width of the expanding boxborders.