web-dev-qa-db-fra.com

Changer une image avec onclick ()

Je veux changer une image en une autre image quand je clique sur l'objet. le code est empilé dans l'ordre suivant:

<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>

Ce que je veux faire est, quand je clique sur le 

  • Je veux changer l'image en une version colorée de l'image, c'est-à-dire une autre image. Maintenant, je sais que je peux utiliser jquery/JS pour le réaliser. Mais je ne veux pas qu'une quantité énorme de code JS accomplisse quelque chose d'aussi simple. 

    Peut-on le faire en utilisant quelque chose de plus simple? Comme des pseudo sélecteurs? Classe active ?? 

    Je n'arrive pas à y penser. 

    • javascripthtmlcss
    6
    amit

    Pour changer d’image onclik avec javascript, vous devez avoir une image avec id:

    <p>
        <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
            style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"  />
</p>

    Ensuite, vous pouvez appeler la fonction javascript lorsque vous cliquez sur l'image:

    <script language="javascript">
    function changeImage() {

        if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png") 
        {
            document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
        }
    }
</script>

    Ce code définira image sur maxim.png si le fichier img.src actuel est défini sur minim.png et vice versa . Pour plus de détails, visitez le site: Changer d'image en cliquant avec le lien JavaScript

    10
    Markweb

    Ou peut-être Et c'est probablement le cas

    <img src="path" onclick="this.src='path'">

    8
    anymousse

    Si vos images sont nommées, vous pouvez les référencer via le DOM et changer la source.

    document["imgName"].src="../newImgSrc.jpg";

    ou

    document.getElementById("imgName").src="../newImgSrc.jpg";
    6
    Clayton

    Que dis-tu de ça?

    Ne nécessite pas autant de codage

    $(".plus").click(function(){
 $(this).toggleClass("minus")  ; 
})
    .plus{
    background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_blue.png");
    width:130px;
    height:130px;
    background-repeat:no-repeat;
}

.plus.minus{
    background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_minus.png");
    width:130px;
    height:130px;
    background-repeat:no-repeat;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><div class="plus">CHANGE</div></a>

    5
    Bel

    Le mieux que vous puissiez faire est de déclencher un changement d'image d'arrière-plan lors du survol de la LI. Si vous souhaitez que quelque chose se produise lorsque vous cliquez sur un lien LI et que vous restez ainsi, vous devrez utiliser un JS.

    Je nommerais les images commençant par bw_ et clr_ et utiliserais simplement JS pour les permuter.

    exemple:

    $("#images").find('img').bind("click", function() {
  var src = $(this).attr("src"), 
      state = (src.indexOf("bw_") === 0) ? 'bw' : 'clr';

  (state === 'bw') ? src = src.replace('bw_','clr_') : src = src.replace('clr_','bw_');  

  $(this).attr("src", src);

});

    lien vers fiddle: http://jsfiddle.net/felcom/J2ucD/

    2
    Collin G.

    Si vous ne voulez pas utiliser js, je pense que vous pouvez utiliser <a href="javascript:void(0);"></a> au lieu de img puis utiliser css comme

    a {
  background: url('oldImage.png');
}
a:visited {
  background: url('newImage.png');
}

    EDIT: Nope. Désolé, cela ne fonctionne que pour :hover

    1
    Molecular Man

    Ici, lorsque vous cliquez sur next ou previous, l'attribut src d'une balise img est remplacé par la valeur suivante ou précédente d'un tableau.

    <div id="imageGallery">    
    <img id="image" src="http://adamyost.com/images/wasatch_thumb.gif" />
    <div id="previous">Previous</div>    
    <div id="next">Next</div>        
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
    $( document ).ready(function() {

        var images = [
            "http://placehold.it/350x150",
            "http://placehold.it/150x150",
            "http://placehold.it/50x150"    
        ];

        var imageIndex = 0;

        $("#previous").on("click", function(){          
            imageIndex = (imageIndex + images.length -1) % (images.length);    
            $("#image").attr('src', images[imageIndex]);
        });

        $("#next").on("click", function(){
            imageIndex = (imageIndex+1) % (images.length);    
            $("#image").attr('src', images[imageIndex]);
        });

        $("#image").attr(images[0]);

    });
</script>

    J'ai pu implémenter cela en modifiant cette réponse: tableau jQuery avec les boutons suivant et précédent pour faire défiler les entrées

    1
    addzies

    Vous pouvez essayer quelque chose comme ça:

    CSS

    div {
    width:200px;
    height:200px;
    background: url(img1.png) center center no-repeat;
}

.visited {
    background: url(img2.png) center center no-repeat;
}

    HTML

    <div href="#" onclick="this.className='visited'">
    <p>Content</p>
</div>

    Fiddle

    1
    Andres Ilich

    Ce script permet de changer l'image en cliquant sur le texte:

    <script>
    $(document).ready(function(){
    $('li').click(function(){
    var imgpath = $(this).attr('dir');
    $('#image').html('<img src='+imgpath+'>');
    });
    $('.btn').click(function(){
    $('#thumbs').fadeIn(500);
    $('#image').animate({marginTop:'10px'},200);
    $(this).hide();
    $('#hide').fadeIn('slow');
    });
    $('#hide').click(function(){
    $('#thumbs').fadeOut(500,function (){
    $('#image').animate({marginTop:'50px'},200);
    });
    $(this).hide();
    $('#show').fadeIn('slow');
    });
    });
    </script>


<div class="sandiv">
<h1 style="text-align:center;">The  Human  Body  Parts :</h1>
<div id="thumbs">
<div class="sanl">
<ul>
<li dir="5.png">Human-body-organ-diag-1</li>
<li dir="4.png">Human-body-organ-diag-2</li>
<li dir="3.png">Human-body-organ-diag-3</li>
<li dir="2.png">Human-body-organ-diag-4</li>
<li dir="1.png">Human-body-organ-diag-5</li>
</ul>
</div>
</div>
<div class="man">
<div id="image">
<img src="2.png" width="348" height="375"></div>
</div>
<div id="thumbs">
<div class="sanr" >
<ul>
<li dir="5.png">Human-body-organ-diag-6</li>
<li dir="4.png">Human-body-organ-diag-7</li>
<li dir="3.png">Human-body-organ-diag-8</li>
<li dir="2.png">Human-body-organ-diag-9</li>
<li dir="1.png">Human-body-organ-diag-10</li>
</ul>
</div>
</div>
<h2><a style="color:#333;" href="http://www.sanwebcorner.com/">sanwebcorner.com</a></h2>
</div>

    voir le demo here

    1
    M. Lak
    function chkicon(num,allsize) {
    var  flagicon = document.getElementById("flagicon"+num).value;

    if(flagicon=="plus"){
         //alert("P== "+flagicon);

         for (var i = 0; i < allsize; i++) {
            if(document.getElementById("flagicon"+i).value !=""){
               document.getElementById("flagicon"+i).value = "plus";
               document.images["pic"+i].src  = "../images/plus.gif";
            }
          }


         document.images["pic"+num].src = "../images/minus.gif";
         document.getElementById("flagicon"+num).value = "minus";

    }else if(flagicon=="minus"){
         //alert("M== "+flagicon);

          document.images["pic"+num].src  = "../images/plus.gif";    
          document.getElementById("flagicon"+num).value = "plus";

    }else{
          for (var i = 0; i < allsize; i++) {
            if(document.getElementById("flagicon"+i).value !=""){
               document.getElementById("flagicon"+i).value = "plus";
               document.images["pic"+i].src  = "../images/plus.gif";
            }
          }
    }
}
    0
    Cherryishappy