« »

This JavaScript creates a unique rollover animation for textlinks and buttons (pictures). The smooth zoom-in-zoom-out effect requires almost no bandwidth. You may set each JavaScript link to a different color and a different borderwidth. Fast loading. True copy and paste installation. Very easy configuration. Degrades well with non IE5x browsers.

Label: Rollover animation for textlinks

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT>

// 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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<a href="http://www.javascriptbank.com" onMouseOver="showlines(this,'red',16)" onMouseOut="hidelines()">Mouse over this to see</a>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Peter Gehrig [more]
3,358
0
6
0
6.45 KBytes

JavaScript Rollover animation for textlinks - Language: English

2.5/5 6 votes / 3,358 previews / 0 comment 30/01/2007 This JavaScript creates a unique rollover ...JavaScript Rollover animation for textlinks - Rollover animation for textlinks - Language: English

Let's be first member to do this

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Rollover animation for textlinks

Label: Rollover animation for textlinks (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: Rollover animation for textlinks