2 Replies - 6498 Views - Last Post: 27 April 2010 - 10:32 AM Rate Topic: -----

#1 jggarley  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-April 10

Display Image plus Menu Description When user mouseover a MenuItem

Posted 26 April 2010 - 09:50 AM

I'm working on a project as a student for my internship and I need help. I have a masterPage with horizontal menuItems as shown in the attached screen-captured . What I want to achieved is:

1. Have a default image and description.
2. When a user mouse-over the menuItem, display an image from and its description in two different DIVs.
3. When a user mouse-out, display default image and description.

First, I was considering storing the images and text description in SQL database but because of performance issue, I decided the images in an image folder in my root directory and use Javascript.
 <script language="javascript" type="text/javascript">
        var dateObject = new Date();
        var defaultImage = new Image();
        var travelNurse = new Image();
        var allied = new Image();....etc


        function Preload() {
        if(document.images)
       defaultImage.src = "images/default.jpg";
    travelNurse.src = "images/travelNurse.jpg";
        } 
               
    </script>

<div class="gray_banner">
<asp:Image ID="graybanner" runat="server" ImageUrl="~/images/grayBanner.jpg" alt="" />
  </div>
 <div class="clear hideSkiplink">
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
      IncludeStyleBlock="False" Orientation="Horizontal" DataSourceID="SiteMapDataSource"
       StaticDisplayLevels="2">
    </asp:Menu>
    </div>


Please take a look at the attached screenshotfor more details. I'm using VB.Net and VS 2010

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Display Image plus Menu Description When user mouseover a MenuItem

#2 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: Display Image plus Menu Description When user mouseover a MenuItem

Posted 27 April 2010 - 09:34 AM

Where are you having problems?
Was This Post Helpful? 0
  • +
  • -

#3 jggarley  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-April 10

Re: Display Image plus Menu Description When user mouseover a MenuItem

Posted 27 April 2010 - 10:32 AM

View PostJayman, on 27 April 2010 - 08:34 AM, said:

Where are you having problems?


My problem is how to reference the Sitemap Node Title or menu item (example: About Us, Allied, Pharmacy, etc) using Javascript and display the image and text based on MouseOver event. I have the following layout for my web sitemap and masterpage.

MasterPage SiteMap
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
IncludeStyleBlock="False" Orientation="Horizontal" DataSourceID="SiteMapDataSource"
StaticDisplayLevels="2">
</asp:Menu>

Web sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="~/about.aspx" title="About Us" description=""/>
<siteMapNode url="~/xxxx/Default.aspx" title="xxxxxxx" />
<siteMapNode url="~/allied/default.aspx" title="Allied" description="xxxxxx" />
<siteMapNode url="~/pharmacy.aspx" title="Pharmacy" description="xxxxxx" />
</siteMapNode>
</siteMapNode>
</siteMap>
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1