ocultar/mostrar una imagen en jquery

Question

¿Cómo mostrar/ocultar la imagen al hacer clic en el hipervínculo?

<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

¿Qué imagen quieres ocultar? Suponiendo que todas las imágenes, el siguiente debería funcionar:

$("img").hide(); 

De lo contrario, el uso de selectores, se puede encontrar todas las imágenes que son elementos secundarios del div que contiene, y ocultar aquellos.

Sin embargo, os recomiendo que lea la documentación de jQuery, que podría haber averiguado lo mismo: http://docs.jquery.com/Main_Page

Answer 2

Si usted está tratando de ocultar img img carga y mostrar el ancho de banda de ancho de banda clic y viceversa esto funcionaría

<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

uso the .css() jQuery manipulators, o mejor aún, simplemente llame .show()/.hide() en la imagen una vez que haya obtenido un mango a la misma (por ejemplo $('#img' + id)).

BTW, usted should not escribe los controladores de Javascript con el prefijo "javascript:".

Answer 4

Tenía que hacer algo como esto ahora. Terminé haciendo:

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(); 

Answer 5

<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 6

Con nombre de la clase de imagen:

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

Con ID de la imagen:

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

Answer 7

Sé que esto es un mensaje más antiguo, pero puede ser útil para aquellos que buscan mostrar una imagen del lado del servidor .NET usando jQuery.

Tienes que usar una lógica ligeramente diferente.

Entonces, $ ("# <% = myServerimg.ClientID%>"). Show() no funcionará si ocultó la imagen usando myServerimg.visible = false.

su lugar, utilice el siguiente en el lado del servidor:

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