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

Posted on 2006-05-30
Last Modified: 2010-08-05

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

I have a 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="">
            <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,

Question by:taylor11
    LVL 6

    Accepted 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.

    Author Comment

    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!


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    This article shows how to read a single webpage's HTML into a string variable, and it also shows how to automate a sequence so you can read and process a list of webpages.  I was tasked with reading and parsing a series of webpages to collect some s…
    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now