• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 572
  • Last Modified:

Show/Hide Image within UserControl On a page that uses a javascript file


I'm not sure is this is the topic area I need to ask this question or not.

I have a asp.net web app. page which only has a panel with a user control inside it. :

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Community.aspx.vb" Inherits="Home.Community"%>
<%@ Register TagPrefix="uc1" TagName="TopMenu" Src="TopMenu.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <LINK href="Styles.css" type="text/css" rel="stylesheet">
            <LINK href="menuStyle.css" type="text/css" rel="stylesheet">
            <script language="JavaScript" src="includes/Home.js" type="text/javascript"></script>
      <body MS_POSITIONING="GridLayout">
            <form id="Form1" method="post" runat="server">
                  <asp:Panel id="pnlTop" style="Z-INDEX: 101; LEFT: 36px; POSITION: absolute; TOP: 0px" runat="server"
                        Width="192px" Height="24px">
<uc1:TopMenu id=TopMenu1 runat="server"></uc1:TopMenu>

One panel that is inside my user control is:

<asp:panel id="pnlLogo" Width="700px" Height="85px" MS_POSITIONING="GridLayout" runat="server"
            BackImageUrl="images/backfromjay.jpg" CssClass="right">
<asp:Image id=imgTop CssClass="hideimage" ImageUrl="images/promotions.jpg" Runat="server"></asp:Image>
<asp:ImageButton id=ImageButton1 runat="server" Height="82px" ImageUrl="images/tmlogopink.jpg"></asp:ImageButton>

I also have a datalist in the user control, which onMouseOver and onMouseOut, I would like to show and hide different images in "imgTop". So on the server side of my user control I have:

            Dim link As HyperLink
            link = CType(e.Item.Controls(1), HyperLink)
            Dim img As String
            img = CType(e.Item.Controls(3), Label).Text
            link.Attributes.Add("OnMouseOver", "VeryTopPicChange('" + img + "')")
            link.Attributes.Add("OnMouseOut", "NoImage()")

My javascript functions are:

function VeryTopPicChange(imgToShow)
      document.all("imgTop").src = "images/" + imgToShow;
      document.all("imgTop").style.visibility = "visible";

function NoImage()
      document.all("imgTop").style.visibility = "hidden";

When I mouse-over, I gen in the function, it alerts with the correct imgToShow name, but then gives an error on the page of "object required". If I use and html image tag instead of the asp image tag, the javascript recognizes the image object and works, however I cannot set the html image tag to hidden to begin with.

Any suggestions on this would be greatly appreciated. I'm guessing it's because the image control is so nested within all the other controls.

Thank you in advance,

1 Solution
This behaviour is hapening because of ASP.NET object hierarchy. When you use your imgTop image with runat=server attribute it gets it's ID changed to one that corespond to the controls hierarchy.
ASP.NET object/controls have three ID properties:
ID - this is simple ID, which is used often to identify variable name (by the framework).
ClientID - this is fully qualified ID as will be shown on the page - this is probably what you looking for. Take a look at the page source generated and you'll find your image but with id like: <img id="page1_Control1_imgTop">.
and UniqueID - which is used to identify events coming back during the postback.

The most usefull is ClientID, but you need to remember, that if you move the control to another ControlCollection then your object ClientId will be update to correspond to proper hierarchy. The hierarchy in the id name is used to determine how viewstate sould be restored.

hope it helps.
taylor11Author Commented:
Thank you very much, I had to deal with that a long time ago and forgot all about that.
The id is "TopMenu1_imgTop". The user control gets the id "TopMenu1" no matter what page I put it on, so that will work great.

Thank you again!


Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now