Mouseover thumbnail previews with TreeView

Home ›

ASP.NET Forums » General ASP.NET » Master Pages, Themes and Navigation Controls » Mouseover thumbnail previews with TreeView

Shortcuts

Previous Next

Mouseover thumbnail previews with TreeView

Last post 05-25-2008 11:28 PM by Amanda Wang - MSFT. 4 replies.

Sort Posts:

Mouseover thumbnail previews with TreeView

05-21-2008, 3:48 PM

Contact

516 point Member
divided
Member since 05-12-2008, 2:18 PM
Cleveland, OH
Posts 130

Just wondering if this was possible? I can't use "attributes.add" anywhere in my treeview function and using css seems futile.

Thanks in advance.

Re: Mouseover thumbnail previews with TreeView

05-23-2008, 2:24 AM

Contact

30,009 point All-Star
Amanda Wang - MSFT
Member since 04-30-2007, 2:39 AM
Posts 3,104

Hi,

It is not very clear what you want to do, could you please give more details about your idea? and how do you want to do?

Amanda Wang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Mouseover thumbnail previews with TreeView

05-23-2008, 10:19 AM

Contact

516 point Member
divided
Member since 05-12-2008, 2:18 PM
Cleveland, OH
Posts 130

I have a treeview implemented. All of the files in the treeview are images. I'd like to be able to mouseover the filenames and show the corresponding image when you hover over the link.

Here is the treeview code:

        public TreeNode BrowseServer(ImageUploadScreen screen, TreeNode rootNode, string path)
        {
            DirectoryInfo di = new DirectoryInfo(path);
            DirectoryInfo[] dicollection = di.GetDirectories();
            foreach (DirectoryInfo de in dicollection)
            {
                TreeNode tn = new TreeNode(de.Name, de.FullName);
                rootNode.ChildNodes.Add(tn);
                BrowseServer(screen, tn, de.FullName);
            }

            FileInfo[] ficollection = di.GetFiles();

            foreach (FileInfo fe in ficollection)
            {
                TreeNode tn = new TreeNode(fe.Name, fe.FullName);
                rootNode.ChildNodes.Add(tn);
            }
            return rootNode;
        }

Thanks in advance.

Re: Mouseover thumbnail previews with TreeView

05-23-2008, 10:35 AM

Contact

2,886 point Contributor
chidge
Member since 02-12-2008, 11:11 AM
Manchester, UK
Posts 530

Hello,

Use AJAX Animation http://www.asp.net/learn/ajax-videos/video-117.aspx

I hope this helps, if it answers your question, don't forget to mark it as such for those who come afterwards.

Regards,

Gareth Chidgey
Managing Director
PushInternet Ltd

Re: Mouseover thumbnail previews with TreeView

05-25-2008, 11:28 PM

Contact

Answer

30,009 point All-Star
Amanda Wang - MSFT
Member since 04-30-2007, 2:39 AM
Posts 3,104

Hi,

I would suggest that you can try to use the HoverMenu extension of the ASP.Net Ajax Control Toolkit, when you hover the treenode, then pop the a image,

Below is a sample code, about how to use the HoverMenu extension on the treenode,

<%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
        var activeDivID="";
        function pageLoad(){
            $find("myHMEBID").add_shown(onHoverMenuShown);
        }
        function onHoverMenuShown(){
          var activeDivLocation = $common.getLocation($get(activeDivID));
          $common.setLocation($find("myHMEBID").get_popupElement(),new Sys.UI.Point(activeDivLocation.x + $get(activeDivID).offsetWidth,activeDivLocation.y));

        }
        function showHoverMenu(divID){
           activeDivID = divID;
           $find("myHMEBID")._onUnhover();
           $find("myHMEBID")._onHover();
           if(activeDivID =="myDiv7")
          {
             $get("<%=Image1.ClientID %>").style.visibility = "visible";
            $get("<%=Image2.ClientID %>").style.visibility = "hidden";

        }
       else
       {
          $get("<%=Image1.ClientID %>").style.visibility = "hidden";
         $get("<%=Image2.ClientID %>").style.visibility = "visible";
      }
        }
        function hideHoverMenu(divID){
           $get("<%=Panel1.ClientID %>").style.display= "none";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:TreeView ID="TreeView1" runat="server" ShowLines="True" DataSourceID="SiteMapDataSource1" OnTreeNodeDataBound="TreeView1_TreeNodeDataBound">
        </asp:TreeView>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
         <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" style="display:none">
             <asp:Image ID="Image1" runat=server ImageUrl="~/Image/button-search.gif" />
             <asp:Image ID="Image2" runat=server ImageUrl="~/Image/bg-searchhh.gif" />
        </asp:Panel>
        <cc1:HoverMenuExtender ID="HoverMenuExtender1" BehaviorID="myHMEBID" runat="server" PopupControlID="Panel1" TargetControlID="Button1">
        </cc1:HoverMenuExtender>
        <div style="display:none" >
        <asp:Button ID="Button1" runat="server" Text="Button" /></div>
    </div>

    </form>
</body>
</html>

Hope it helps.

Amanda Wang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Page 1 of 1 (5 items)

RSS Available