Menu
Hi
I am trying to create a basic menu where if you put your mouse over a button you get a bit of descriptive text or an image appearing somewhere else on the page. I have tried to do this with hiding/revealing hidden divs – works fine with IE but no others.
<html>
<head>
<script language=”javascript”>
var descriptions = new Array();
descriptions[0] = “<p>See whats been added to the web site recently</p>”;
descriptions[1] = “<p>Find out more about me</p>”;
descriptions[2] = “<p>Check out me links</p>”;
function showDescription(descriptionIndex)
{
if (document.all)
{
DescriptionDiv.style.visibility = “visible”;
DescriptionDiv.innerHTML = descriptions[descriptionIndex];
}
else
{
document.DescriptionDiv.visibility = “visible”;
document.DescriptionDiv.document.open();
document.DescriptionDiv.document.write(“<div class=’DescriptionDivStyle’>”);
document.DescriptionDiv.document.write(descriptions[descriptionIndex]);
document.DescriptionDiv.document.write(“</div>”);
document.DescriptionDiv.document.close();
}
}
function clearDescription()
{
if (document.all)
{
DescriptionDiv.style.visibility = “hidden”;
}
else
{
document.DescriptionDiv.visibility = “hidden”;
}
}
</script>
<style>
div {border-width:thin;border-style:ridge;border-color:red;width:250px;height:70px;visibilty:hidden;}
.DescriptionDiv {position:absolute;left:120px;top:50px;}
</style>
</head>
<body>
<a href=”whatsnew.htm” onmouseover=”showDescription(0)” onmouseout=”clearDescription()”><img src=”home_over.png” border=”0″></a>
<br />
<a href=”about.htm” onmouseover=”showDescription(1)” onmouseout=”clearDescription()”><img src=”about_over.png” border=”0″></a>
<br />
<a href=”links.htm” onmouseover=”showDescription(2)” onmouseout=”clearDescription()”><img src=”home_over.png” border=”0″></a>
<br />
<div id=”DescriptionDiv” name=”DescriptionDiv” class=”DescriptionDiv”></div>
</body>
</html>
Help please ?