• User

    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">
    <!--
    function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
    e.style.display = 'none';
    else
    e.style.display = 'block';
    }
    //-->
    </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


  • ModSenior

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


  • User

    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


  • Moderatore

    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 😉


  • User

    Grazie MiWebDesign,
    proprio quello che cercavo.

    Sei stato gentilissimo.
    Luca