Making a <div> visible through OnMouseOver on a menu

roadrunner262 · 12-08-2005, 08:48 PM

I should first say that I am new to html, Java, Javascript, etc. I was placed on a project at work where they are using Vignette to publish the portal I am working with. I have been tasked with modifying the horizontal and vertical menus for the existing portal. Right now the horizontal menu is created through a loop and the vertical menu is built statically on the lefthandside of the Home page. New items appear under the vertical menu as the user clicks on items on the horizontal menu.

I am trying to make a <div> (in reference to creating the vertical menu) visible after hiding it to start with when a user is hovering over a horizontal menu item. I set the visibility property to hidden for the <div> for the vertical menu. The horizontal menu is not an image or series of images. It is created through a loop. I then have some html that I added that I need to include some javascript with to make the <div> for the vertical menu visible once the mouse is hovering over (I am assuming use onMouseOver??) an item on the horizontal menu. I am stuck since this is all new to me. Is there anyone that can help me? I would really appreciate it.

I am including the code I am referring to:

<%
System.out.println("******************************");
System.out.println("******************************");
System.out.println("extAssign_horizontalNav: enter");
Iterator levelsOfOrderedHorizontalNodes = nodesInHorizontalOrder.iterator();

String ACTIVE_ROW_COLOR = "#333366";
%>

<link rel="js" href="<%=_pathToImages%>milonic_src.js" type=text/javascript></link>

<script language = "Javascript" type=text/javascript>

</script>

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="100%" style="background-color:#FFFFFF">
<table border="0" cellspacing="0" cellpadding="0" width="100%" >
<tr>
<td valign="bottom" height="40" width="100%">
<div id="nga-HorizontalNav", style="position:absolute;left:6px;top:122px">
<table cellspacing="0" border="0" bordercolor="#FFFFFF" style="padding-top:5px: padding-bottom:5px" cellpadding="0" width="650px">
<tr>
<td>
<%
int levelOfSelectedNode = -1;
String menuCSS = "";
String activeStyle = "";

while (levelsOfOrderedHorizontalNodes.hasNext()) {
Iterator orderedNodesForLevel = ((List)levelsOfOrderedHorizontalNodes.next()).iterator();

while (orderedNodesForLevel.hasNext()) {
MenuItemNode node = (MenuItemNode) orderedNodesForLevel.next();
String nodeTitle = node.getTitle();
int currentLevel = node.getLevel();

if(node.isSelected() || node.wasSelected()) {
activeStyle = "style=\"background:"+ACTIVE_ROW_COLOR+"\"";
}
else {
activeStyle = "";
}

if (!nodeTitle.equalsIgnoreCase("Unapproved")) {
%>

<td> <a <%=activeStyle%> href="<%=node.getHref()%>" <%= node.getTarget()%>><%=node.getTitle()%> </a>
</td>
<%
}

} //orderedNodesForLevel.hasNext()

} //levelsOfOrderedHorizontalNodes.hasNext()

%>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>








<div id="nga-VerticalNav", style="position:absolute;left:6px;top:160px;visibility:hidden">
<table cellspacing="0" border="2" bordercolor="#000000" style="padding-top:5px: padding-bottom:5px" cellpadding="0" width="140px">
<tr>

<script type="text/javascript">
function rollover("javascript:alert)
<td><a <%=activeStyle%> href="The Relocation Process">The Relocation Process</a></td>
</tr>
<tr>
<td><a <%=activeStyle%> href="Considering a CONUS Assignment">Considering a CONUS Assignment</a></td>
</tr>
<tr>
<td><a <%=activeStyle%> href="Prior To Departing">Prior To Departing</a></td>
</tr>
<tr>
<td><a <%=activeStyle%> href="During Your Tour">During Your Tour</a></td>
</tr>
<tr>
<td><a <%=activeStyle%> href="Concluding Your Tour">Concluding Your Tour</a></td>
</tr>

</table>
</div>