asp.net OnMouseOver

Hello,

I have this working:

    imgLinkCFO.Attributes.Add("onMouseOver", "this.firstChild.src='/products/images/cfo2.gif'");
    imgLinkCFO.Attributes.Add("onMouseOut", "this.firstChild.src='/products/images/cfo1.gif'");

    <asp:HyperLink ID="imgLinkCFO" Text="Color Fiber Optic System" ImageUrl="~/products/images/productPage/cfo1.gif" NavigateUrl="~/products_htm/cfo.htm" runat="server" />


This is only part of what I need onMouseOver to do.  I also need it to change another image on the page depending on which link the mouse is over.

This is my image I need to change:

      <asp:Image ID="sideImage" ImageUrl="~/images/image1.gif" AlternateText="Product Information" runat="server" />
LVL 7
Kurt4949Asked:
Who is Participating?
 
laotzi2000Connect With a Mentor Commented:
I see. Your image is inside a placeholder and it changes its id on client side.

So instead of using sideImage.src, you should use sideImage.ClientID.

Like :
imgLinkCFO.Attributes.Add("onMouseOver", "this.firstChild.src='1.jpg';" + sideImage.ClientID+".src='1.jpg'");
0
 
laotzi2000Commented:
Try this one:

        imgLinkCFO.Attributes.Add("onMouseOver", "this.firstChild.src='1.jpg';sideImage.src='1.jpg'");
        imgLinkCFO.Attributes.Add("onMouseOut", "this.firstChild.src='2.jpg';sideImage.src='2.jpg'");        
0
 
Kurt4949Author Commented:
Hmm I tried that and it doesn't seem to do anything.  Any other ideas?

Thanks, Kurt
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
laotzi2000Commented:
I tested it on my computer.
When you put the mouse overthe link, both the link image and the other image will change.
The same when you move the mouse out of the link.
0
 
Kurt4949Author Commented:
ok this is really frustrating then.  The link images changes but not the sideImage.  Here is what I have.  I double checked my file locations serveral times.  No idea why it would work for you when its not working for me.  I tested it in IE and Firefox


    imgLinkCFO.Attributes.Add("onMouseOver", "this.firstChild.src='/products/images/productPage/cfo2.gif';sideImage.src='/products/images/productPhotos/fes_med.jpg'");
    imgLinkCFO.Attributes.Add("onMouseOut", "this.firstChild.src='/products/images/productPage/cfo1.gif';sideImage.src='/products/images/productPhotos/prod_info.gif'");  


    <asp:HyperLink ID="imgLinkCFO" Text="Color Fiber Optic System" ImageUrl="~/products/images/productPage/cfo1.gif" NavigateUrl="~/products_htm/cfo.htm" runat="server" />
    <asp:Image ID="sideImage" ImageUrl="~/products/images/productPhotos/prod_info.gif" AlternateText="Product Information" runat="server" />

0
 
Kurt4949Author Commented:
I know that my file path is correct because this works fine when i mouse over the side image

    sideImage.Attributes.Add("onMouseOver", "this.src='/products/images/productPhotos/fes_med.jpg'");
0
 
Kurt4949Author Commented:
are you using asp.net 2.0 C# ?
0
 
laotzi2000Commented:
Can you check and give the html source of the file when it's loaded in IE?
0
 
Kurt4949Author Commented:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">
<head><link href="../include/main.css" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="Description" />
    <meta name="keywords" content="keyword1, keyword2" />
    <style type="text/css">
       
    </style>

   
    <!-- Mouse Over Script -->
    <script language="JavaScript" type="text/JavaScript">
        <!-- //Mouse Over Script
        function MM_swapImgRestore()
        { //v3.0
            var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
        }

        function MM_preloadImages()
        { //v3.0
            var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
        }

        function MM_findObj(n, d)
        { //v4.01
            var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
            d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
            if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
            for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
            if(!x && d.getElementById) x=d.getElementById(n); return x;
        }

        function MM_swapImage() { //v3.0
            var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
            if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
        }
        //-->
    </script>
    <!-- End Mouse Over Script -->
   
<title>
      Product Information
</title></head>



<body onload="MM_preloadImages('/images/mainNavbar/about2.jpg','/images/mainNavbar/products2.jpg','/images/mainNavbar/enviroment2.jpg','/images/mainNavbar/applications2.jpg','/images/mainNavbar/support2.jpg','/images/mainNavbar/contact2.jpg')">
    <div id="pagecell">
   
        <!--insert navLogo -->
        <div id="navLogo">
            <a href="/default.aspx">
            <img id="ctl00_mainLogo" src="../images/logoNav.jpg" alt="Promess Logo" style="border-width:0px;" />
            </a>
        </div>
        <!--end navLogo -->

        <!--insert navBar -->
        <div id="navBar">
            <a href="/about_promess.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','/images/mainNavbar/about2.jpg',1)"><img src="/images/mainNavbar/about1.jpg" alt="About Promess" id="About" /></a>
            <a href="/products.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','/images/mainNavbar/products2.jpg',1)"><img src="/images/mainNavbar/products1.jpg" alt="Product Information" id="Products" /></a>
            <a href="/promessEnvironment.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Environment','','/images/mainNavbar/enviroment2.jpg',1)"><img src="/images/mainNavbar/enviroment1.jpg" alt="Promess and the Environment" id="Environment" /></a>
            <a href="/applications.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Applications','','/images/mainNavbar/applications2.jpg',1)"><img src="/images/mainNavbar/applications1.jpg" alt="Applications" id="Applications" /></a>
            <a href="/support.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Support','','/images/mainNavbar/support2.jpg',1)"><img src="/images/mainNavbar/support1.jpg" alt="Support" id="Support" /></a>
            <a href="/contactPromess.aspx" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','/images/mainNavbar/contact2.jpg',1)"><img src="/images/mainNavbar/contact1.jpg" alt="Contact Information" id="Contact" /></a>
        </div>
        <!--end navBar -->
       

        <form name="aspnetForm" method="post" action="products.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwOTc3MTkxNjgPZBYCZg9kFgICBg9kFgICBQ9kFgwCAQ8PZBYEHgtvbk1vdXNlT3ZlcgV2dGhpcy5maXJzdENoaWxkLnNyYz0nL3Byb2R1Y3RzL2ltYWdlcy9wcm9kdWN0UGFnZS9jZm8yLmdpZic7c2lkZUltYWdlLnNyYz0nL3Byb2R1Y3RzL2ltYWdlcy9wcm9kdWN0UGhvdG9zL2Zlc19tZWQuanBnJx4Kb25Nb3VzZU91dAV4dGhpcy5maXJzdENoaWxkLnNyYz0nL3Byb2R1Y3RzL2ltYWdlcy9wcm9kdWN0UGFnZS9jZm8xLmdpZic7c2lkZUltYWdlLnNyYz0nL3Byb2R1Y3RzL2ltYWdlcy9wcm9kdWN0UGhvdG9zL3Byb2RfaW5mby5naWYnZAIDDw9kFgQfAAU8dGhpcy5maXJzdENoaWxkLnNyYz0nL3Byb2R1Y3RzL2ltYWdlcy9wcm9kdWN0UGFnZS9lbWFwMi5naWYnHwEFPHRoaXMuZmlyc3RDaGlsZC5zcmM9Jy9wcm9kdWN0cy9pbWFnZXMvcHJvZHVjdFBhZ2UvZW1hcDEuZ2lmJ2QCBQ8PZBYEHwAFQHRoaXMuZmlyc3RDaGlsZC5zcmM9Jy9wcm9kdWN0cy9pbWFnZXMvcHJvZHVjdFBhZ2UvbWluaS1QUk8yLmdpZicfAQVAdGhpcy5maXJzdENoaWxkLnNyYz0nL3Byb2R1Y3RzL2ltYWdlcy9wcm9kdWN0UGFnZS9taW5pLVBSTzEuZ2lmJ2QCBw8PZBYEHwAFO3RoaXMuZmlyc3RDaGlsZC5zcmM9Jy9wcm9kdWN0cy9pbWFnZXMvcHJvZHVjdFBhZ2UvbXRjMi5naWYnHwEFO3RoaXMuZmlyc3RDaGlsZC5zcmM9Jy9wcm9kdWN0cy9pbWFnZXMvcHJvZHVjdFBhZ2UvbXRjMS5naWYnZAILDw9kFgQfAAU7dGhpcy5maXJzdENoaWxkLnNyYz0nL3Byb2R1Y3RzL2ltYWdlcy9wcm9kdWN0UGFnZS9wcG0yLmdpZicfAQU7dGhpcy5maXJzdENoaWxkLnNyYz0nL3Byb2R1Y3RzL2ltYWdlcy9wcm9kdWN0UGFnZS9wcG0xLmdpZidkAg0PD2QWBB8ABTt0aGlzLmZpcnN0Q2hpbGQuc3JjPScvcHJvZHVjdHMvaW1hZ2VzL3Byb2R1Y3RQYWdlL3VjbTIuZ2lmJx8BBTt0aGlzLmZpcnN0Q2hpbGQuc3JjPScvcHJvZHVjdHMvaW1hZ2VzL3Byb2R1Y3RQYWdlL3VjbTEuZ2lmJ2Rkcd/x+WqJXP69eWd15Mj8iFZqBHY=" />
</div>

       
            <!--insert section logo -->
            <div id="sectionLogo">
               
    <img id="ctl00_sectionLogoContentPlaceHolder_pageTitle" src="../images/pageTitles/products.jpg" alt="Product Information" style="border-width:0px;" />

            </div>
            <!--end section logo -->
           
            <!--start sideImage -->
            <div id="sideImage">
               
      <img id="ctl00_sideImagePlaceHolder_sideImage" src="images/productPhotos/prod_info.gif" alt="Product Information" style="border-width:0px;" />

            </div>    
            <!--end sideImage -->
       
            <!--start maincontent -->
            <div id="mainContent" align="center">
               

<div>
    <a id="ctl00_mainContentPlaceHolder_imgLinkCFO" onMouseOver="this.firstChild.src='/products/images/productPage/cfo2.gif';sideImage.src='/products/images/productPhotos/fes_med.jpg'" onMouseOut="this.firstChild.src='/products/images/productPage/cfo1.gif';sideImage.src='/products/images/productPhotos/prod_info.gif'" href="../products_htm/cfo.htm"><img src="images/productPage/cfo1.gif" alt="Color Fiber Optic System" style="border-width:0px;" /></a>
    <a id="ctl00_mainContentPlaceHolder_imgLinkEMAP" onMouseOver="this.firstChild.src='/products/images/productPage/emap2.gif'" onMouseOut="this.firstChild.src='/products/images/productPage/emap1.gif'" href="../products_htm/emap.htm"><img src="images/productPage/emap1.gif" alt="Electro - Mechanical Assembly Servo Press" style="border-width:0px;" /></a>
    <a id="ctl00_mainContentPlaceHolder_imgLinkMiniPRO" onMouseOver="this.firstChild.src='/products/images/productPage/mini-PRO2.gif'" onMouseOut="this.firstChild.src='/products/images/productPage/mini-PRO1.gif'" href="Mini-PRO.aspx"><img src="images/productPage/mini-PRO1.gif" alt="Mini-PRO Monitoring &amp; Test System" style="border-width:0px;" /></a>
    <a id="ctl00_mainContentPlaceHolder_imgLinkMTC" onMouseOver="this.firstChild.src='/products/images/productPage/mtc2.gif'" onMouseOut="this.firstChild.src='/products/images/productPage/mtc1.gif'" href="../products_htm/mtc.htm"><img src="images/productPage/mtc1.gif" alt="Motorized Torque Control System" style="border-width:0px;" /></a>
 <!--   <a id="ctl00_mainContentPlaceHolder_imgLinkPcPRO" href="Pc-PRO.aspx"><img src="images/productPage/Pc-PRO1.gif" alt="Pc-PRO Monitoring &amp; Test System" style="border-width:0px;" /></a> -->
    <a id="ctl00_mainContentPlaceHolder_imgLinkPPM" onMouseOver="this.firstChild.src='/products/images/productPage/ppm2.gif'" onMouseOut="this.firstChild.src='/products/images/productPage/ppm1.gif'" href="../products_htm/ppm.htm"><img src="images/productPage/ppm1.gif" alt="Promess Panel Meter" style="border-width:0px;" /></a>
    <a id="ctl00_mainContentPlaceHolder_imgLinkUCM" onMouseOver="this.firstChild.src='/products/images/productPage/ucm2.gif'" onMouseOut="this.firstChild.src='/products/images/productPage/ucm1.gif'" href="../products_htm/ucm.htm"><img src="images/productPage/ucm1.gif" alt="Universal Calibration Meter" style="border-width:0px;" /></a>
</div>


            </div>
            <!--end maincontent -->

        </form>
   
    </div><!--endPageCell -->  
</body>
</html>
0
 
Kurt4949Author Commented:
um after i looked at the html I figured out the problem.  looks like asp.net is changing the id from sideImage to ctl00_sideImagePlaceHolder_sideImage
0
 
Kurt4949Author Commented:
I guess it is cause I am using master pages

If I change the id to ctl00_sideImagePlaceHolder_sideImage then it works.  Should I just do that or is there a better work around?
0
 
Kurt4949Author Commented:
Cool!! works now , thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.