How do you make a .net menu control display when you mouseover an unrelated image.

audExpert
audExpert used Ask the Experts™
on
Have a visual studio menu control on a page.  Elsewhere on the page I have a graphic.  I want to cause the menu control to act as though it is being moused over when I mouseover the graphic.  Does anyone know how to do this with javascript or an area map or anything?

Here is the html for the menu control on my page.

<div id="mnuTax" >
     <asp:Menu ID="mnuTaxX" runat="server" BorderColor="Transparent" Font-Bold="True" BackColor="Transparent" datasourceid="SiteMapDataSourceTax" DynamicHoverStyle-BorderWidth="1px" DynamicHoverStyle-Font-Names="verdana, arial" DynamicMenuItemStyle-BorderColor="Black" DynamicMenuItemStyle-BorderStyle="Solid" DynamicMenuItemStyle-BorderWidth="1px" DynamicMenuItemStyle-Font-Names="verdana, arial" ItemWrap="false" MaximumDynamicDisplayLevels="5" DynamicHoverStyle-Font-Size="9pt" DynamicMenuItemStyle-Font-Size="9pt" DynamicMenuStyle-Font-Size="9pt" DynamicSelectedStyle-Font-Size="9pt" Font-Size="9pt" StaticHoverStyle-Font-Size="9pt" StaticMenuStyle-Font-Size="9pt" StaticSelectedStyle-Font-Size="9pt" Font-Names="Verdana" DynamicMenuItemStyle-ForeColor="Black" DynamicMenuStyle-BackColor="White" DynamicSelectedStyle-ForeColor="Black" DynamicSelectedStyle-BackColor="White" StaticHoverStyle-BackColor="Transparent" StaticHoverStyle-ForeColor="Transparent" StaticMenuItemStyle-ForeColor="Transparent" DynamicHoverStyle-BackColor="White" DynamicHoverStyle-ForeColor="Black" DynamicMenuStyle-ForeColor="black" ForeColor="Transparent" StaticSubMenuIndent="1px" Visible="true" height="25px" Width="45px" StaticMenuStyle-VerticalPadding="0" StaticEnableDefaultPopOutImage="false" SkipLinkText="">
        <StaticMenuStyle BackColor="Transparent" BorderColor="Transparent" Font-Size="9pt" VerticalPadding="0px" />
        <StaticMenuItemStyle BackColor="Transparent" BorderColor="Transparent" ForeColor="White" HorizontalPadding="1px"
            VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="White" BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="verdana,arial"
            Font-Size="9pt" ForeColor="Black" />
        <DynamicMenuStyle BackColor="#CCCCCC" BorderColor="DarkGray" Font-Size="9pt" ForeColor="Black" />
        <StaticSelectedStyle BackColor="White" Font-Size="9pt" ForeColor="Transparent" />
        <DynamicSelectedStyle BackColor="White" BorderColor="DarkGray" Font-Size="9pt" ForeColor="Black" />
        <DynamicMenuItemStyle BackColor="#CCCCCC" BorderColor="DarkGray" BorderStyle="Solid"
            BorderWidth="1px" Font-Names="verdana,arial" Font-Size="9pt" ForeColor="Black"
            HorizontalPadding="4px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="Transparent" BorderColor="DarkGray" Font-Size="9pt" ForeColor="White" />
    </asp:Menu>  
    </div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
You mean something like (I am totally guessing from the mess you posted)

<img
onMouseOver="document.getElementById('mnuTaxX').style.backgroundColor='white';
document.getElementById('mnuTaxX').style.color='black'">
onMouseOut="document.getElementById('mnuTaxX').style.backgroundColor='black';
document.getElementById('mnuTaxX').style.color='white'">

Author

Commented:
When you mouse over a .net 2.0 menu control it launches the control's self created javascript.  Specifically it calls a function Menu_HoverStatic that control, I think.  I basically want to call that function from a certain image on my page with the hope that it will cause the .net menu control to expand.

You pointed out to me that you are doing a getElementById for the menu control.  I suppose once I got the element I could somehow execute a method that would cause it's mouseover event.  I'm not sure how you would do this.  Good thought though.  I wasn't thinking that you could retrieve a server control like you would a javascript element.  If you know how to retrieve the item with getElementById and then cause it to execute the mouseover, please advise.

Author

Commented:
This worked.  Points to me.

I added this on the image I want to activate the menu control's drop down.  The trick was finding the ctl00_ name.  

onmouseover="MnuExpand('ctl00_mnuPyrlX');" onmouseout="MnuCollapse('ctl00_mnuPyrlX');"

Then I added the following script in my page.

<script language=Javascript>
    //Place after the creation of the menu controls on the page.
    function MnuExpand(strItem) {
        var obj;
        obj = document.getElementById(strItem);          
        Menu_HoverStatic(obj);
    }
    function MnuCollapse(strItem) {
        var obj;
        obj = document.getElementById(strItem);          
        Menu_Unhover(obj);
    }
    </script>

To my own surprise it worked.
   
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Great... Please ask for a close (PAQ) and refund
PAQed with points refunded (500)

Computer101
Community Support Moderator

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial