DHTML JavaScript Rollover Animation for Text Links and Buttons

DHTML JavaScript Rollover Animation for Text Links & Buttons Effect
This script creates a unique rollover animation for text links and buttons (pictures). The smooth zoom in & zoom out effect requires almost no bandwidth. You may set each link to a different color and a different border width. Fast loading. True copy and paste installation. Very easy configuration. Made for IE5+ and higher. Degrades well with non IE5+ browsers.

Test the script

Move your mouse over this short link or put it over this very long text link to test the highlight effect. You may even apply it on linked images (move your mouse over the picture on the left hand side).

Configuration

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

<SCRIPT>
// CREDITS:
// Rollover animation for textlinks and buttons
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. 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 & http://www.designerwiz.com
// fabulant01@hotmail.com
// 11/27/2001

// 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 linkpostop
var linkposbottom
var linkposleft
var linkposright
var linewidth
var lineheight
var animatedlink
var animatedcolor
var interval=50
var plusorminus=1

function showlines(animatedlink,animatedbordercolor,maxwidth) {
    if (document.all) {
        thislink=animatedlink
        thisbordercolor=animatedbordercolor
        maxborder_thickness=maxwidth
        border_thickness=1
        i_fadestrength=100;
        i_fadestrengthstep=Math.floor(100/maxborder_thickness)
        animation=true
        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
        linkpostop=thislink.offsetTop
        linkposbottom=linkpostop+thislink.offsetHeight
        linkposleft=thislink.offsetLeft
        linkposright=linkposleft+thislink.offsetWidth
    
        linewidth=linkposright-linkposleft+(4*border_thickness) 
        lineheight=linkposbottom-linkpostop+(4*border_thickness)
    
        document.all.linetopimg.style.posTop=linkpostop-(2*border_thickness)
        document.all.linetopimg.style.posLeft=linkposleft-(2*border_thickness)
    
        document.all.linebottomimg.style.posTop=linkpostop+lineheight-(2*border_thickness)
        document.all.linebottomimg.style.posLeft=linkposleft-(2*border_thickness)
    
        document.all.lineleftimg.style.posTop=linkpostop-(1*border_thickness)
        document.all.lineleftimg.style.posLeft=linkposleft-(2*border_thickness)
    
        document.all.linerightimg.style.posTop=linkpostop-(1*border_thickness)
        document.all.linerightimg.style.posLeft=linkposleft+linewidth-(3*border_thickness)
    
        var linetopimgcontent="<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor="+border_color+">"
        linetopimgcontent+="<img src='emptyimg.gif' width="+linewidth+" height="+border_thickness+">"
        linetopimgcontent+="</td></tr></table>"
        var linebottomimgcontent=linetopimgcontent
        var lineh=lineheight-border_thickness
        var lineleftimgcontent="<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor="+border_color+">"
        lineleftimgcontent+="<img src='emptyimg.gif' width="+border_thickness+" height="+lineh+">"
        lineleftimgcontent+="</td></tr></table>"
        var linerightimgcontent=lineleftimgcontent
        
        linetopimg.filters.alpha.opacity=i_fadestrength
        linebottomimg.filters.alpha.opacity=i_fadestrength
        lineleftimg.filters.alpha.opacity=i_fadestrength
        linerightimg.filters.alpha.opacity=i_fadestrength
    
        linetopimg.innerHTML=linetopimgcontent
        linebottomimg.innerHTML=linebottomimgcontent
        lineleftimg.innerHTML=lineleftimgcontent
        linerightimg.innerHTML=linerightimgcontent
    
        document.all.linetopimg.style.visibility="visible"
        document.all.linebottomimg.style.visibility="visible"
        document.all.lineleftimg.style.visibility="visible"
        document.all.linerightimg.style.visibility="visible"
        
        var timer=setTimeout("doanimation()",interval)
    }
    else {
        clearTimeout(timer)
    }
}

function hidelines() {
    if (document.all) {
        animation=false
        document.all.linetopimg.style.visibility="hidden"
        document.all.linebottomimg.style.visibility="hidden"
        document.all.lineleftimg.style.visibility="hidden"
        document.all.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>")
}
</script>

Step 2: Paste the below green/red/blue code into any text link, as shown here:
<a href="http://www.yourlink.com" onMouseOver="showlines(this,'red',16)" onMouseOut="hidelines()">testlink</a>

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

Step 3: Download this white tiny image -->

<-- by right clicking it, and selecting "save as". Put the image into the same folder as your web page!

Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL: