Click here to Skip to main content
15,881,172 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have a datalist, onmouseover i want to show some links at bottom and hide in mouseout
exactly like
http://www.yellowpages.com/dallas-tx/meat-packing

I want to hide second panel(id- Panel1) present in the first one as shown below. Please help, its urgent

ASP.NET
 <asp:DataList ID="dListItems" runat="server"  ForeColor="Navy" 
                    Width="100%" OnItemDataBound="datalist_ItemDataBound">
                <itemtemplate>                
                <asp:Panel ID="Container" runat="server" onmouseover = "document.getElementById('<%=Panel1.ClientID%>').style.display = 'block' "
                 onmouseout = "document.getElementById('<%=Panel1.ClientID%>').style.display = 'none' ">
<table  runat="server"   width="100%" cellpadding="0" cellspacing="0" style="border: 1px solid #FFFFFF">
                            <tr>
                            <td bgcolor="#0269cb" style="height: 2px;" align="center" valign="middle">
                                     
                                <asp:Table ID="Table1" runat="server" BackImageUrl="~/images/number_back.gif" Width="20px">
                                <asp:TableRow>
                                <asp:TableCell HorizontalAlign="Center">
                                    <asp:Label ID="Label7" runat="server" Font-Size="X-Small">                      
     
                            </td>
                                <td bgcolor="#0269cb" style="height: 2px; ">  
                                    <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="true" Font-Underline="false"
                                        ForeColor="white" NavigateUrl='<%# Eval("id","~/Catlog.aspx?id={0}") %>'><%#Eval("title") %> <br />                                </td>
                                <td bgcolor="#0269cb" align="right">
                                   <asp:LinkButton ID="LinkButton1" runat="server" 
            PostBackUrl="http://www.google.com">
                                    
                                    </td>
                            </tr>
    
                            <tr>
                                <td colspan="3" style="font-size: 9pt; font-family: Arial; text-align: left;">
                                    <br />
                                   <%--'<%# Highlight(Eval("dis").ToString()) %>'--%>
                                    <asp:Label ID="Label6" runat="server" ><%# Eval("dis")%>
                                     <br />                                </td>
                            </tr>
                            <tr>
                                <td style="color: gray; font-size: 10pt; font-family: Arial; width: 10%;">
                                    Address :</td>
                                <td align="left" style="width: 50%; font-size: 9pt; color: #663333; font-family: Arial;">
                                    <%# Eval("xdd") %>
                                    <br />                                </td>
                                <td rowspan="15" style="width: 40%;">
                                    <asp:Panel ID="pnl2" runat="server" Width="100%">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td align="center" valign="middle" style="font-size: small">
                                                    <asp:Image ID="Image2" runat="server" Height="100px" AlternateText="Image Not Available " ImageUrl='<%#"~/myphoto1.ashx?Id=" +  Eval("id2") %>'
                                                        Width="100px" /></td>
                                            </tr>
                                        </table>
                                                                    </td>
                            </tr>
                            <tr>
                                <td style="color: gray; font-size: 10pt; font-family: Arial; width: 10%;">
                                    Phone :                                </td>
                                <td align="left" style="width: 50%; font-size: 9pt; color: #663333; font-family: Arial;">
                                    <%# Eval("ph") %>                                </td>
                            </tr>
                            <tr>
                                <td style="color: gray; font-size: 10pt; font-family: Arial; width: 10%;">
                                    Fax :                                </td>
                                <td align="left" style="width: 50%; font-size: 9pt; color: #663333; font-family: Arial;">
                                    &lt;%# Eval("sta")%&gt;                                </td>
                            </tr>
                            <tr>
                                <td style="color: gray; font-size: 10pt; font-family: Arial; width: 13%;">
                                    website :                                </td>
                                <td align="left" style="width: 60%; font-size: 9pt; color: #663333; font-family: Arial;">
                                    &lt;asp:HyperLink ID="hk1" runat="server" NavigateUrl='&lt;%# Eval("id","~/new_catalog/home.aspx?userid={0}") %&gt;'
                                        Style="font-size: 9pt; color: #663333; font-family: Arial;"&gt;&lt;%# Eval("catalog") %&gt;<br />                                
                                        </td>
                            </tr>
                         
                            <tr>
                                <td style="width: 10%;">                                </td>
                                <td style="width: 50%;">
                                  &lt;asp:Panel ID="Panel1" runat="server" &gt;   
                                    &lt;asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl='&lt;%# Eval("id","~/Catlog.aspx?id={0}") %&gt;'
                                        Style="font-size: 9pt; font-family: Arial;"&gt;View Catalog
                                    &nbsp;
                                    &lt;asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl='&lt;%# Eval("id","~/new_catalog/home.aspx?userid={0}") %&gt;'
                                        Style="font-size: 9pt; font-family: Arial;"&gt;View Details
                                        &nbsp;
                                    &lt;asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl='&lt;%# Eval("id","~/enquiry_form.aspx?id={0}") %&gt;'
                                        Style="font-size: 9pt; font-family: Arial;"&gt;Send Enquiry
                                          
                                        </td>
                                <td style="width: 30%;">                                </td>
                            </tr>

                        
                
                
                
                <table width="100%">
               
                </table>                                   
                </itemtemplate>
Posted
Updated 30-Jul-12 7:59am
v4

(link doesnt work for me so i dont know exactly what you need. the answer is generic)
ASP stands for "Active Server Pages". As the Name implies, it always needs interaction with a Server to apply changes. So you would need to add a postback-event to the onhover, add the divs on server, send it again to the browser and render it.
Better Solution: Use JavaScript and AJAX (for easy use try jQuery)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900