wow, that script is a lot of over head....
you can do it much easier.
here's what you do. i'll just show you one side.
you have your image of the turbo:
and when hovered upon, you want to show some text, but be hidden by default:
<div style="visibility:hidden;">
Register y0!
</div>
now, we need a simple function so that when the image is hovered upon, the div is dynamically changed to show.
we need to add a trigger to the IMG.
css has a pseudo-class called :hover
unfortunately, IE is a piece of shit, and doesn't support this on any other element other than a link:
a:hover
so, we need to make our image a link. no problem...
now, lets get some CSS and javascript involved to make this all work.
i'll put the code together here and explain it after.
Code:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function show_hide_text()
{
if(document.getElementById("div1").style.visibility == "hidden")
{
document.getElementById("div1").style.visibility = "visible";
}
else
{
document.getElementById("div1").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<div>
<a href="register.php" onmouseover="show_hide_text();" onmouseout="show_hide_text();"><img src="turbo.jpg" /></a>
</div>
<div id="div1" style="visibility:hidden;">
Register y0!
</div>
</body>
</html>
you can see it in action here:
https://hondaswap.com/temp/showhide.html
I obviously don't have turbo.jpg loaded, so the image is dead....
in javascript, and most languages, == is testing for if it is equal, while a single = is an assignment operator.
in the script, we TEST if it is equal (==) and then, we ASSIGN the div to its proper style with the single quote (=)
Thsi will work in IE6 and fire fox.
some older browsers don't support he getElementById() function (which simply looks for the div id, in this case, i called it div1)
Another thing to note-- ID's can only be used once! so your other image, you will need to make another function and div called div2 (or some other unique name)
oh, ooops-- i just notioced that you wanted to change the image as well as the text. ok. i'll help you with that too.
give me a sec to re-write....
-----------------------------------------
ok new code.
Code:
<html>
<head>
<title>test</title>
<script type="text/javascript">
function show_hide_text()
{
if(document.getElementById("div1").style.visibility == "hidden")
{
document.getElementById("div1").style.visibility = "visible";
document.images["turbo1"].src = "http://www.gillanis.com/turb04_omo.jpg";
}
else
{
document.getElementById("div1").style.visibility = "hidden";
document.images["turbo1"].src = "http://www.gillanis.com/turb04.jpg";
}
}
</script>
</head>
<body>
<div>
<a href="register.php" onmouseover="show_hide_text();" onmouseout="show_hide_text();"><img id="turbo1" name="turbo1" src="http://www.gillanis.com/turb04.jpg" /></a>
</div>
<div id="div1" style="visibility:hidden;">
Register y0!
</div>
</body>
</html>
i linked your images too in the test file.
I'm not sure this is what you're after though.... using ill-matched sized images gets funky....
https://hondaswap.com/temp/showhide.html
looks goood man.
