Change image visiblity to true or false

Question

0.00/5 (No votes)

See more:

Respected sir/madam,
I am working on a web project. In that project I want to hide an image and make another image visible instead of the hidden one. The image control used is asp:Image.
The code which I have written is as follows:

<script  type="text/javascript">
function changeImage() 
{
  document.getElementById("req1").style.display = "hidden";
  document.req1.visibility = "hide"
  req1.style.dispaly = 'none';
  alert('Client side');
}
</script>

But the thing is that on client click the images' visibility is not changing. Please help!

Posted 14-Dec-10 1:54am

linto_11

Updated 14-Dec-10 1:57am

JF2015

v2

Add a Solution

Comments

TweakBird 14-Dec-10 8:03am

Cross post.

5 solutions

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)

Not Active · Answer 1 · 2010-12-14T02:25:00

Solution 1

document.req1.visibility = "hide"

hide is not a valid command

document.req1.visibility = "hidden"

Also make sure the elements are referenced properly. Also, although I assume you added typos when posting here, but make sure of your spelling.

Posted 14-Dec-10 2:25am

Not Active

Updated 14-Dec-10 2:34am

v3

Comments

Toniyo Jackson 14-Dec-10 8:34am

Removed extra space.

[no name] 14-Dec-10 8:51am

Edit was completely unnecessary. Please refrain from future trivial editing exercises.

linto_11 · Answer 2 · 2010-12-14T02:35:00

Solution 2

thanks for your revert Mr. Mark,
but that is also not working,
i am not able to find what the problem is. from last 3 days i am working on this silly thing and scratching my brain out. There is not a single change in the page on which i am workin and from today the javascript is not being invoked. i am not able to understand what the problem is. i am fed up. please help!!

Posted 14-Dec-10 2:35am

linto_11

Comments

[no name] 14-Dec-10 8:52am

You post a comment to the answer not another answer.

[no name] 14-Dec-10 8:54am

Have you debugged? Are the elements valid? Where/how are you calling this function?

linto_11 14-Dec-10 9:16am

Sorry for the delay.
this is the code that i have written:

<asp:TextBox ID="txtFirstName" runat="server" Width="350px"
onchange = "changeImage()" ></asp:TextBox>

<script type="text/javascript">
function changeImage() {
document.getElementById("req1").style.display = "hidden";
document.req1.visibility = "hidden"
// req1.style.dispaly = 'none';
alert('Client side');
}
</script>

This is the code.
Is it right??
If not then please help with right code.

[no name] 14-Dec-10 9:27am

Is document.getElementById("req1") valid?
document.req1 refers to the same element as above. Is it valid?

These two statements do essentially the same thing.

linto_11 14-Dec-10 9:58am

ya document.getElementById("req1") is valid and the other one could be ignored.

linto_11 14-Dec-10 10:11am

help me with a simple code to change the visibility on text change event. and it shld happen at client side
please help

fjdiewornncalwe · Answer 3 · 2010-12-14T04:52:00

Try this instead...

I have found in the past that I had to be very explicit and use the object.style.visibility attribute to make this type of behavior work properly.

Creating the object upfront in javascript was something I started doing only so that I would have the ability to debug easier. I know it isn't necessary, but it makes the code easier to understand. (Totally my own opinion)

<script type="text/javascript">

function changeImage()
{
    var obj = document.getElementById("req1");
    if( obj )
    {
        obj.style.visibility = "hidden";
    }
    else
    {
        alert( "req1 is null" );
    }
}

</script>

Baji Jabbar · Answer 4 · 2010-12-14T16:31:00

You are using asp:Image control and you want to display another image when user clicks on a button . Then Why you are using Java Script for this purpose.
In the same control itself you can load another image. In code behind you can try

C#

protected void Button1_Click1(object sender, EventArgs e)
    {
        Image1.ImageUrl = "~/image/myImage.bmp";
    }

here 'image' is the folder in the project root.
If you are using java script and hiding one control and the making other visible means , you have to load the both the image on the page load.

Hope this will help you :)

Bryian Tan · Answer 5 · 2010-12-14T16:52:00

hello,

set the display to "none" instead of "hidden"

<script type="text/javascript">
function changeImage() {
document.getElementById("req1").style.display = "none";
alert('Client side'); }
</script>

if you are using asp.net image control

document.getElementById("<%= req1.ClientID %>").style.display = "none";

Change image visiblity to true or false

5 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0