Button hide on mouseover on image

Question

i have the following code:

  <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<script src="Js/jquery.min.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $("#propertyimage").mouseover(function () {

                $("#lnkedit").hide();
            });
            $("#propertyimage").mouseout(function () {
                $("#lnkedit").show();
            });

        });
    </script>


<div class="ddldemo">
  <asp:Repeater ID="rptproperty" runat="server">
   <ItemTemplate>
      <div style="width: 165px;">
          <asp:Image ID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
          <asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
       </div>
   </ItemTemplate>
   </asp:Repeater>
 </div>
 </asp:Content>

all code is in content place holder when i take mouse over to the image button is not hide/show .

how can i solve this?

Answer 1

The issue is your element doesn't have an ID. The ID attribute in your code is the server side ASP.NET ID, it's not the HTML ID attribute. For the client side ID use ClientID :

<asp:Image ID="propertyimage" ClientID="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />

Same with your LinkButton:

<asp:LinkButton runat="server" ID="lnkedit" ClientID="lnkedit" Text="Edit"></asp:LinkButton>

When debugging code like this, remember to view the source in the browser, to see the actual HTML that the browser is receiving.

If you have multiple of these, then a fixed ID is not going to work but it must be unique. In that case, you will need to use something else such as a class, but you'll also need to add logic to get the button relative to the image.

Answer 2

Be careful, I don't know much about ASP, but I see "template" and "repeater"? So there seems to be a good chance for you to create several inputs with the same ID.

Try this :

<script src="Js/jquery.min.js"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $("#propertyimage").mouseover(function () {

                $(this).next().hide();
            });
            $("#propertyimage").mouseout(function () {
                $(this).next().show();
            });

        });
    </script>


<div class="ddldemo">
  <asp:Repeater ID="rptproperty" runat="server">
   <ItemTemplate>
      <div style="width: 165px;">
          <asp:Image class="propertyimage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
          <asp:LinkButton runat="server" class="lnkedit" Text="Edit"></asp:LinkButton>
       </div>
   </ItemTemplate>
   </asp:Repeater>
 </div>

Answer 3

You can't do that when you have controls in an ItemTemplate. The unique client id of the control is not going to be #propertyimage. It can't be since you could have multiple user controls with the same button name. ASP.Net will generate a unique id that is relevant to the control tree. In this case getting the clientid is not going to work since you are in a repeater control and you can't hav emultiple controls with the same client id.

You can do this with classes though. Here is an example I put together on jsFiddle . It uses a class to identify the repeater, then uses the jquery next() method to select the next anchor element and show/hide it. Try altering your code like so:

<script src="Js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".propertyImage").mouseover(function () {

            $(this).next("a").hide();
        });
        $(".propertyImage").mouseout(function () {
            $(this).next("a").show();
        });

    });
</script>
<div class="ddldemo">
<asp:Repeater ID="rptproperty" runat="server">
<ItemTemplate>
  <div style="width: 165px;">
      <asp:Image ID="propertyimage" class="propertyImage" runat="server" ImageUrl='<%#Eval("image1") %>'" />
      <asp:LinkButton runat="server" ID="lnkedit" Text="Edit"></asp:LinkButton>
   </div>
</ItemTemplate>
</asp:Repeater>
</div>