Javascript nascondere/mostrare immagine

psicona

Javascript nascondere/mostrare immagine

Ciao a tutti,
sto affrontando il problema in oggetto.

Ho alcune immagini mostrate in una tabella.

Sto cercando di inserire un javascript che mi consenta di mostrare/nascondere l'immagine.

In rete ho trovato questo script che sembra fare al caso mio:
<script type="text/javascript">

</script>

faccio una prova con un testo:
<a href="#" onclick="toggle_visibility('prova1');">Clicca per nascondere l'immagine</a><br>
<div id="prova1"><img src="immagine1.png"></div><br>

e funziona.

Il problema è che ho un link separato e una immagine (che viene nascosta o mostrata).
Ciò che vorrei realizzare è cliccare direttamente sull'immagine in modo da nasconderla e (magari inserendo o swappando un'altra immagine, ad esempio una con una bella X rossa) mostrarla nuovamente ricliccandoci sopra.

Non so se son riuscito a spiegarmi.
Grazie in anticipo a chi potrà aiutarmi.
Luca

marcocarrieri

Con il click su un immagine vuoi nascondere altri oggetti?
Se si non basta che fai un altro element bv id?

psicona

No, con il clic sull'immagine voglio nascondere l'immagine stessa

oppure

con il click sull'immagine voglio che ne appaia un'altra al suo posto (ad esempio una X che mi indica che l'ho, diciamo, cancellata) e se riclicco su quest'altra (sulla X) mi ricompare la prima

miwebdesign

Ciao psicona,
per non creare casini innanzitutto assegna una classe a tutte le immagini che vuoi nascondere. Es: **can-hidden

**Adesso in fondo alla pagina dopo l'inclusione di jQuery scrivi questo codice:


    <script>
    $(".can-hidden").each(function(){
        $(this).attr("data-url",$(this).attr("src"));
    })
    var noimg = "http://img4.wikia.nocookie.net/__cb20070819174055/uncyclopedia/images/b/be/200px-Dancing_Banana.gif";
    $(".can-hidden").each(function(){
    $(this).click(function(){
        if($(this).hasClass("is-hidden")){
            $(this).removeClass("is-hidden");
            $(this).attr("src",$(this).attr("data-url"));
        }else{
            $(this).addClass("is-hidden");
            $(this).attr("src",noimg);
        }
    })
})
    </script>

Lo script è molto dinamico e fà tutto da sè, devi solo dirgli quale immagine alternativa vuoi includere su **var noimg ed assegnare alle immagini che vuoi che abbiano questa funzionalità la classe can-hidden **(o cambiando le referenze qualsiasi classe tu voglia )

Ecco lo script funzionante: http://codepen.io/anon/pen/XmXOZm

Ciao

psicona

Grazie MiWebDesign,
proprio quello che cercavo.

Sei stato gentilissimo.
Luca