PDA

View Full Version : Animated Rollover Tab Button Help!



cys
11-21-2007, 08:29 AM
Hi,
I'm trying to build a tab menu which when you roll the mouse cursor over the tab button it seems like its moving upward and coming back down in a different color. I set the overflow of the containing block of the tab buttons to hidden so when the button moves upward using a negative top margin it doesn't show. The problem is that when hovered the button keeps on moving up and down and doesn't stop after one time how it should. I'm using this script:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Document</title>
<style type="text/css">
ul#MenuBarHorizontal {
display:block;
overflow:hidden;
margin:0;
padding: 0;
list-style-type:none;
width:700px;
height:73px;
float:right;
}
ul#MenuBarHorizontal li {
display:block;
float: left;
background-image:url(images/tab_button_off.gif);
background-repeat:no-repeat;
width:140px;
height:73px;
z-index:1000;
margin-top:0px;
}
ul#MenuBarHorizontal a {
display: block;
height:34px;
padding-top:8px;
text-align:center;
text-decoration:none;
font-size:large;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
</style>
<script type="text/javascript" src="js_script/tab_menu.js">
</script>
<script type="text/javascript">
window.onload = function() {
rolloverInit();
};
</script>
</head>
<body>
<ul id="MenuBarHorizontal">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Community</span></a></li>
<li><a href="#"><span>Links</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</body>
</html>




function rolloverInit() {
for (var i=0; i<document.getElementById("MenuBarHorizontal").childNodes.length; i++) {
if (document.getElementById("MenuBarHorizontal").childNodes[i].tagName == "LI") {
setupRollover(document.getElementById("MenuBarHorizontal").childNodes[i].firstChild);
}
}
}

function setupRollover(button) {
button.onmouseover = rollOver;

button.onmouseout = rollOut;
}

function rollOut() {
var thisbutton = this.parentNode;
if (thisbutton.style.backgroundImage == "url(images/tab_button_on.gif)")
var i = 0;
var k = -45;
var intId = setInterval(moveUp, 1);
function moveUp() {
i += 5;
thisbutton.style.marginTop = "-" + i + "px";
if (i == 45) {
clearInterval(intId);
intId = setInterval(moveDown, 1);
}
}
function moveDown() {
thisbutton.style.backgroundImage = "";
k += 5;
thisbutton.style.marginTop =k + "px";
if (k == 0) {
clearInterval(intId);
}
}

}

function rollOver() {
var thisbutton = this.parentNode;
var i = 0;
var k = -45;
if (thisbutton.style.backgroundImage == "") {
var intId = setInterval(moveUp, 1);
}
function moveUp() {
i += 5;
thisbutton.style.marginTop = "-" + i + "px";
if (i == 45) {
clearInterval(intId);
intId = setInterval(moveDown, 1);
}
}
function moveDown() {
thisbutton.style.backgroundImage = "url(images/tab_button_on.gif)";
k += 5;
thisbutton.style.marginTop =k + "px";
if (k == 0) {
clearInterval(intId);
}
}
}


Btw this is my first script so any other suggestion about this code would be appreciated :D .
thanks!