javascript on mouse over and on mosueout not working when controles are in formview

Question

1.00/5 (1 vote)

See more:

JavaScript

<script language="javascript" type="text/javascript">
       function fun1() {

           document.getElementById("chng_profilepic").style.visibility = "visible";
          
       }

       function fun2() {
           document.getElementById("chng_profilepic").style.visibility = "hidden";
          
       }
    
    </script>

and below is aspx page code

ASP.NET

<img src='<%#"uploaded1/"+ Eval("image") %>' alt='<%# Eval("image") %>' id="profile_pic" style="margin-left:4px; width:180px"
height="200" onmouseover="fun1()"  önmouseout="fun2()" />

 <asp:Button ID="chng_profilepic" runat="server" Text="change profile" OnClick="chng_profilepic_Click" />

this content is on page which is attached with master page and on mouse over and onmouseout is not working so how to do it?
Both Image and button is inside a formview

Posted 6-Oct-13 18:31pm

Omprakash Kukana

Updated 6-Oct-13 19:55pm

v6

Add a Solution

Comments

[no name] 7-Oct-13 0:51am

I think you are missing functioning sign (()).!!
try that then check like this
<asp:Button ID="chng_profilepic" runat="server" Text="change profile" OnClick="chng_profilepic_Click()" />

tanweer 7-Oct-13 0:58am

no nned to add () sign here bro, this will not work

3 solutions

Solution 1

try this

JavaScript

<script language="javascript" type="text/javascript">
       function fun1() {
 
           document.getElementById('<%=chng_profilepic.ClientID%>').style.visibility = "visible";
          
       }
 
       function fun2() {
           document.getElementById('<%=chng_profilepic.ClientID%>').style.visibility = "hidden";
          
       }
    
    </script>

Posted 6-Oct-13 18:53pm

Zafar A khan

Comments

Omprakash Kukana 7-Oct-13 1:03am

Compiler Error Message: CS0103: The name 'chng_profilepic' does not exist in the current context

Zafar A khan 7-Oct-13 1:08am

is the button inside grid ? <asp:Button ID="chng_profilepic" runat="server" Text="change profile" OnClick="chng_profilepic_Click" />
if it is not inside the grid will not give an error

Omprakash Kukana 7-Oct-13 1:21am

no this is inside a form view

Zafar A khan 7-Oct-13 1:35am

this will not work inside formview use firebug to get the correct id of chng_profilepic
and then give it in javascript code.
document.getElementById('get this id by using firbug').style.visibility = "hidden";
OR easy way is to use jquery css selector

Omprakash Kukana 7-Oct-13 1:54am

can u tell me how to use firebug in my vs2010 i havent yet used firebug

Zafar A khan 7-Oct-13 3:04am

firebug is mozilla firefox extension it is used in the browser not in visual studio.
any way your problem has been solved by using jquery .

Solution 2

XML

<script language="javascript" type="text/javascript">
       function fun1() {

           document.getElementById("chng_profilepic").style.display= 'block';

       }

       function fun2() {
           document.getElementById("chng_profilepic").style.display= 'none';

       }

    </script>

Posted 6-Oct-13 19:05pm

Ranesh M Raj

Comments

Omprakash Kukana 7-Oct-13 1:21am

button is not hiding always visible

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**tanweer** · Accepted Answer · 2013-10-06T19:27:00

Solution 3

Hi,
Accessing Elements inside gridview or repeater directlyis quite difficult, try jQuery instead by its css property

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script language="javascript" type="text/javascript">
       function fun1() {
           $('.MyButton').css("display", "block");
       }
       function fun2() {
           $('.MyButton').css("display", "none");
       }
   </script>

and add cssclass property to your button like

ASP.NET

<img src="<%#"uploaded1/"+ Eval("image") %>" alt="<%# Eval("image") %>"  id="profile_pic"
           style="margin-left: 4px; width: 180px" height="200" onmouseover="fun1()" onmouseout="fun2()" />
      <asp:button id="chng_profilepic" runat="server" text="change profile" onclick="chng_profilepic_Click" cssclass="MyButton" xmlns:asp="#unknown" />

Posted 6-Oct-13 19:27pm

tanweer

Updated 6-Oct-13 20:43pm

v3

Comments

Omprakash Kukana 7-Oct-13 1:49am

not working dear

tanweer 7-Oct-13 1:51am

what is the issue, did you get any error?

Omprakash Kukana 7-Oct-13 2:02am

no any error but button is always visible and css design not working

tanweer 7-Oct-13 2:06am

did you add jQuery on your page, because it depends on jQuery

Omprakash Kukana 7-Oct-13 2:17am

how to add jquery?

tanweer 7-Oct-13 2:20am

add this before the script
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Omprakash Kukana 7-Oct-13 2:25am

yes i added tha already

Omprakash Kukana 7-Oct-13 2:27am

but its not working image is fully coverd complete page and button is always visible

tanweer 7-Oct-13 2:44am

I just modified my answer, please check it now, this is working fine

Omprakash Kukana 7-Oct-13 2:54am

thanx mr. tanweer now its working fine can tell me if i want to show that button on image how can i show dt

tanweer 7-Oct-13 2:58am

yeah you may do that, just place the button inside the opening and closing tasgs of the image and do some css to adjust its position

Omprakash Kukana 7-Oct-13 3:10am

okay tnx

Omprakash Kukana 7-Oct-13 5:22am

but button is showing on every time page load how to stop showing it on page load

tanweer 7-Oct-13 7:24am

set style="display:none;" for the button, it will be visible false on page load then will show/hide on your conditions