Jan 30 2007

Ajax.net hoverextender live.com like hovering part 3

Posted by admin under ASP.NET AJAX formally Atlas

Continued from part 1 creating a live.com image search like GUI

Finally lets create the hovering effect:

I decided to try to use the ASP.NET Ajax control toolkit and the hoverextender control.

So all we need to do is

a) add some styles



<style>
.oneimage
{
	float: left;
	margin: 0px 5px 5px 0px;
	width: 170px;
	border-right: #ffffff 1px solid;
	border-top: #ffffff 1px solid;
	border-left: #ffffff 1px solid;
	border-bottom: #ffffff 1px solid;
	padding:10px;
}
.oneimagehover
{
	float: left;
	margin: 0px 5px 5px 0px;
	width: 170px;
	background:#F8FBBD;
	border-right: #000000 1px solid;
	border-top: #000000 1px solid;
	border-left: #000000 1px solid;
	border-bottom: #000000 1px solid;
	padding:10px;
}

</style>

b) add the extender and an "alternate hover div template":



    <ItemTemplate>
        <DIV class="oneimage" runat="server" id="oneimage">
            <h3><br /></h3>
            <p><asp:Image runat="server" ID="img"  Width="150px" Height="110px" /></p>
        </DIV>

        <cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server" 
            PopupControlID="thepop" TargetControlID="oneimage" OffsetX="0" OffsetY="0"  >
        </cc1:HoverMenuExtender>


        <DIV class=oneimagehover  id="thepop" runat="server">
        <h3><asp:Literal ID="lblFileName" runat="server"></asp:Literal></h3>
        <p><asp:Image runat="server" ID="Image1"  Width="150px" Height="110px" /></p>
        </DIV>
        
        
    </ItemTemplate>

Of course we change the codebehind as well to set values for the  new controls:



            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                System.IO.FileInfo oInfo = e.Item.DataItem as System.IO.FileInfo;
                Image oImg = e.Item.FindControl("img") as Image;
                oImg.ImageUrl =  ResolveClientUrl("~/theimages/" +  oInfo.Name );

                //Same 
                Image Image1 = e.Item.FindControl("Image1") as Image;
                Image1.ImageUrl =  oImg.ImageUrl;

                Literal lblFileName = e.Item.FindControl("lblFileName") as Literal;
                lblFileName.Text = oInfo.Name;
            }

All in all it gives us a result like this:

 

The image we are hovering shows the oneimagehover div instead. Pretty cool I'd say.  However - I doubt I have done it in the most efficient way - however I was indeed pretty happy woth the fact that it DID WORK in my FIRST try, just after half an hour.

Now - download the solution and have a look!