Hi all I need some help here. I want to to have some links, and a few divisions. One link will correspond to one division. When I put my mouse over a link, it should make the corresponding division appear. I have tried several means but all to no avail. Only the first piece of code works, but that's too troublesome.
Here's the code which I currently have and want to change. Here I show just one link and division for covenience.
______________________________
<head>
<title>Change visibility of Divisions</title>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bah.html" onMouseOver="document.all.div1.style.display='block'; return true"; onMouseOut="document.all.div1.style.display='none'">Put your Mouse Cursor over this link!</a>
<br><br>
<div ID="div1" style="display:none">This will be the description for the link.</div>
</body>
______________________________
I will have several links and different descriptions for each one, so I wouldn't want to use the code inside the Anchor tag. What I would like are two functions.
For example, I put the following command inside the A tag instead of the current one:
______________________________
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bah.html" onMouseOver="appear('div1'); return true"; onMouseOut="disappear('div1')">Put your Mouse over this link!</a>
______________________________
I realised that I need to use the getElementbyID code inside a JavaScript. However, I have absolutely no idea how to use it. I tried a few pieces of code similar to this but I realised that they don't make any sense and certainly don't work.
______________________________
<head>
<title>Change visibility of Divisions</title>
<script language="JavaScript">
function appear('division')
{
document.getElementbyID('division').style.display="block";
}
function disappear('division')
{
document.getElementbyID('division').style.display="none";
}
</script>
</head>
______________________________
Here's the code which I currently have and want to change. Here I show just one link and division for covenience.
______________________________
<head>
<title>Change visibility of Divisions</title>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bah.html" onMouseOver="document.all.div1.style.display='block'; return true"; onMouseOut="document.all.div1.style.display='none'">Put your Mouse Cursor over this link!</a>
<br><br>
<div ID="div1" style="display:none">This will be the description for the link.</div>
</body>
______________________________
I will have several links and different descriptions for each one, so I wouldn't want to use the code inside the Anchor tag. What I would like are two functions.
For example, I put the following command inside the A tag instead of the current one:
______________________________
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bah.html" onMouseOver="appear('div1'); return true"; onMouseOut="disappear('div1')">Put your Mouse over this link!</a>
______________________________
I realised that I need to use the getElementbyID code inside a JavaScript. However, I have absolutely no idea how to use it. I tried a few pieces of code similar to this but I realised that they don't make any sense and certainly don't work.
______________________________
<head>
<title>Change visibility of Divisions</title>
<script language="JavaScript">
function appear('division')
{
document.getElementbyID('division').style.display="block";
}
function disappear('division')
{
document.getElementbyID('division').style.display="none";
}
</script>
</head>
______________________________