CODEWITHSUNDEEP
javascriptimageonclickshow-hide
Sid
Sid

Reputation: 1253

show and hide an image onclick

I have the user profile picture inside a table having 100px for height and width. I also have radio buttons to set visibility of the profile picture (public, Private, etc.). These are updated using ajax.

What I want to know is how can I show a image (e.g. "success.png") right above the profile picture and fade it out after 2 seconds?

<table class="profimg">
<tr><td align="center"><img class="profimg" src="../images/user/profile/1c4ca4238a0b923820dcc509a6f75849b1.jpg" alt="Administratorasdf" /></td></tr>
<tr><td align="center"><input type='radio' title='Publicly Visible' name='img_pub' onclick="upimg1()" /> <input type='radio' title='Visible Only To Users' value='UsersOnly' name='img_pub' onclick="upimg2()" /> <input type='radio' title='Visible Only To You' value='Hide' name='img_pub' onclick="upimg3()" checked='checked'/></td></tr>
</table>

Upvotes: 0

Views: 2367

Answers (2)

Awad Maharoof
Awad Maharoof

Reputation: 2360

I have added an img tag with the ID 'success'. This tag is the image that fades in and out.

$("#rad").click(function () {
    $("#success").fadeIn(500).delay(1000).fadeOut(1000);
});

dont forget to include the jquery library. Check this demo

Upvotes: 2

polin
polin

Reputation: 2835

<script type="text/javascript"> 
    $(document).ready(function(){
    $(".profimg").click(function(){
        $("this").slideToggle("slow");
      });
    });
</script>

Don't forget to use jquery library.This will not take 2 seconds. But it'll work. you can use settimeout function for time interval. google for it

Upvotes: -1

Related Questions