Javascript onMouseOver wrapping php dynamic content

[jhodara]

Hi there,

I know that php does not recognize onMouseOver events. however, Im wondering if their is a tricky way to get a javascript response from dynamic text. I am working on a nav menu in a wordpress site. wordpress has a function that displays a list of pages created in the admin. I want to be able to display a secondary list of pages when a top-level nav item is moused over. heres the code:

<div id="top">
<script type="text/javascript">
function Show(who) {
Clear();
divel=document.getElementById("drop"+who);
divel.style.display="inline";
divel=document.getElementById("hn"+who);
divel.className="selected";
}

function Hide(who) {
divel=document.getElementById("drop"+who);
divel.style.display="none";
divel=document.getElementById("hn"+who);
divel.className="";
}

function Clear() {
for (i=1;i<=3;i++) {
	divel=document.getElementById("drop"+i);
	divel.style.display="none";
	divel=document.getElementById("hn"+i);
	divel.className="";
}
}
</script>

	<div id="home-nav" onMouseOut="Clear();">
		<ul>
<li id="hn1"><a href="wp_demo/profile" onMouseOver="Show('1')"><?php wp_list_pages(include=4&title_li=' ); ?></a></li> 
<li id="hn2"><a href="wp_demo/services" onMouseOver="Show('2')"><?php wp_list_pages( 'include=6&title_li=' ); ?></a></li> 
<li id="hn3"><a href="wp_demo/portfolio" onMouseOver="Show('3')"><?php wp_list_pages( 'include=8&title_li=' ); ?></a></li> 
<li id="hn4"><a href="wp_demo/contact" onMouseOver="Clear();"><?php wp_list_pages( 'include=12&title_li=' ); ?></a></li> 
<li id="hn5"><a href="wp_demo/hospitality" onMouseOver="Clear();"><?php wp_list_pages( 'include=10&title_li=' ); ?></a></li>
		</ul>
	</div>	<!-- #homenav -->


	<div id="wrapper">

	<div id="drop1" onMouseOver="Show('1')" onMouseOut="Hide('1')"> 
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/blank.gif" alt="" width="960" height="8" border="0" /><br /> 
<div id="menu1"><ul> 
<?php wp_list_pages( 'child_of=4&sort_column=menu_order&title_li=' ); ?> 
</ul></div></div> 

<div id="drop2" onMouseOver="Show('2')" onMouseOut="Hide('2')"> 
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/blank.gif" alt="" width="960" height="8" border="0" /><br /> 
<div id="menu2"><ul> 
<?php wp_list_pages( 'child_of=6&sort_column=menu_order&title_li=' ); ?> 
</ul></div></div> 

<div id="drop3" onMouseOver="Show('3')" onMouseOut="Hide('3')"> 
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/blank.gif" alt="" width="960" height="8" border="0" /><br /> 
<div id="menu3"><ul> 
<?php wp_list_pages( 'child_of=8&sort_column=menu_order&title_li=' ); ?> 

</ul></div></div> 

 

 

Does anybody know a trick to get the dynamic text to be seen by the javascript? for example, if i put a   inside the anchor tags before the php script starts, the onmouseover will register it, and display the secondary nav. I would place invisible divs with links on top of the dynamic text with z-index, but I want the text to be completely dynamic and the client to be able to add as many links as he/she wants.

 

thanks!