[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 961
  • Last Modified:

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" />
0
Kurt4949
Asked:
Kurt4949
  • 8
  • 4
1 Solution
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
laotzi2000Commented:
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
 
Kurt4949Author Commented:
Cool!! works now , thanks
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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