hide/show a image in jquery

Question

How to show/hide the image on clicking the hyperlink?

<script>
function getresource(id)
{
    if(id==4)
    {
       //show image
     }
    else if(id==5)
    {
         //hide image
     }

 } 
</script>
<a href="#" onclick="javascript:getresource('4');">Bandwidth</a>
<a href="#" onclick="javascript:getresource('5');">Upload</a>
<p align="center"> 
  <img id="img3" src="/media/img/close.png" style="visibility: hidden;" />
  <img id="img4" src="/media/img/close.png" style="visibility: hidden;" />
</p>

Answer 1

<script>
function show_image(id)
{
    if(id =='band')
    {
       $("#upload").hide();
       $("#bandwith").show();
    }
    else if(id =='up')
    {
        $("#upload").show();
        $("#bandwith").hide();
    }
} 
</script>

<a href="#" onclick="javascript:show_image('bandwidth');">Bandwidth</a>
<a href="#" onclick="javascript:show_image('upload');">Upload</a>

<img src="img/im.png" id="band" style="visibility: hidden;" />
<img src="img/im1.png" id="up" style="visibility: hidden;" />

Answer 2

If you're trying to hide upload img and show bandwidth img on bandwidth click and viceversa this would work

<script>

    function show_img(id)
    {
        if(id=='bandwidth')
        {
           $("#upload").hide();
           $("#bandwith").show();
        }
        else if(id=='upload')
        {
            $("#upload").show();
            $("#bandwith").hide();
        }
    return false;
     } 
    </script>
    <a href="#" onclick="javascript:show_img('bandwidth');">Bandwidth</a>
    <a href="#" onclick="javascript:show_img('upload');">Upload</a>
    <p align="center"> 
      <img src="/media/img/close.png" style="visibility: hidden;" id="bandwidth"/>
      <img src="/media/img/close.png" style="visibility: hidden;" id="upload"/>
    </p>

Answer 3

What image do you want to hide? Assuming all images, the following should work:

$("img").hide();

Otherwise, using selectors, you could find all images that are child elements of the containing div, and hide those.

However, i strongly recommend you read the Jquery docs, you could have figured it out yourself: http://docs.jquery.com/Main_Page

Answer 4

I know this is an older post but it may be useful for those who are looking to show a .NET server side image using jQuery.

You have to use a slightly different logic.

So, $("#<%=myServerimg.ClientID%>").show() will not work if you hid the image using myServerimg.visible = false.

Instead, use the following on server side:

myServerimg.Style.Add("display", "none")

Answer 5

Use the .css() jQuery manipulators, or better yet just call .show()/.hide() on the image once you've obtained a handle to it (e.g. $('#img' + id)).

BTW, you should not write javascript handlers with the "javascript:" prefix.

Answer 6

With image class name:

$('.img_class').hide(); // to hide image
$('.img_class').show(); // to show image

With image Id :

$('#img_id').hide(); // to hide image
$('#img_id').show(); // to show image