Background-Slide Button links
Implementation is simple, a few div's and your links. With a little tweaking moving images or bullets or anything across is possible. The process is completely automated by Javascript so after copying and pasting the Script and CSS into your HTML you'll just need to create links like so:
<div class="button">
<div class="under-link"> </div><a href="#" id="thelink">home</a>
</div>
The CSS
.button {
border:1px solid #ccc;
background:#333 url(bg.gif);
}
.button a {
display:block;
position:absolute;
padding:0px 0px 0px 10px;
font-family:Verdana;
color:#fff;
text-decoration:none;
}
.button a:hover {
padding-top:1px;
padding-left:11px;
color:#fff;
}
.under-link {
position:absolute;
background:#ff0;
display:none;
}
The Script
var gblObj;
var tmrGo=0;
function tmrGrowLink() {
if(!gblObj) return;
gblObj.setAttribute('size',(gblObj.getAttribute('size')*1+10));
gblObj.style.width=gblObj.getAttribute('size')+'px';
if((gblObj.getAttribute('size') * 1 + 10)>=gblObj.parentNode.offsetWidth) {
gblObj.style.width=gblObj.parentNode.offsetWidth+'px';
return;
} else {
setTimeout('tmrGrowLink()',10);
return;
}
}
function expandLink(obj) {
var p = obj.parentNode;
var d = p.getElementsByTagName("div")[0];
d.style.display='block';
d.setAttribute('size',0);
d.style.display='block';
gblObj=d;
tmrGrowLink();
}
function retractLink(obj) {
gblObj='';
var p = obj.parentNode;
var d = p.getElementsByTagName("div")[0];
d.setAttribute('size',0);
d.style.width='0px';
d.style.display='none';
}
function setupLinkFX_slide() {
myBodyElements =
document.getElementsByTagName("body")[0].getElementsByTagName("*");
for(i=0;i<=myBodyElements.length-1;i++) {
d=myBodyElements[i];
if(d.getAttribute('class')=='under-link') {
d.style.height=(d.parentNode.offsetHeight-1)+'px';
d.style.width='0px';
} else if(d.getAttribute('id')=='thelink') {
d.style.width=(d.parentNode.offsetWidth-11)+'px';
d.style.height=(d.parentNode.offsetHeight-1)+'px';
d.setAttribute('onmouseover','javascript:expandLink(this)');
d.setAttribute('onmouseout','javascript:retractLink(this)');
}
}
}
All Browsers: Long non-Automated Code = IE Fix
Internet Explorer doesn't support the method setAttribute or if it does, it handles it poorly.
Add this line to the under-link CSS: filter:alpha(opacity=10);
In each link add: onmouseenter="javascript:expandLink(this)" onmouseleave="javascript:retractLink(this)" style="text-decoration:none;"
Apparently in IE7 the IE fix does not work.
|
Attempting to recreate a similar effect seen mostly in Flash animations, this code uses pure CSS and Javascript. Super sweet small auto code for Firefox and Opera only at the moment, IE workaround below.
|
