How to show/hide the image on clicking the hyperlink?
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
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>
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
I had to do something like this just now. I ended up doing:
function newWaitImg(id) {
var img = {
"id" : id,
"state" : "on",
"hide" : function () {
$(this.id).hide();
this.state = "off";
},
"show" : function () {
$(this.id).show();
this.state = "on";
},
"toggle" : function () {
if (this.state == "on") {
this.hide();
} else {
this.show();
}
}
};
};
.
.
.
var waitImg = newWaitImg("#myImg");
.
.
.
waitImg.hide(); / waitImg.show(); / waitImg.toggle();
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.
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")