Change an image with onclick()

I want to change an image to some other image when i click on the object. the code is stacked in the following order:

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

What i wish to do is, when i click on the

  • i want to change the image to a colored version of the image, ie, some other image. Now, I know i can use jquery/JS to accomplish it. But i dont want a huge amount of JS code to accomplish something so simple.

    Can it be done using something simpler? Like pseudo selectors? .active class??

    I cannot seem to think of it.

  • Answers:

    Answer

    To change image onclik with javascript you need to have image with id:

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

    Then you could call javascript function when image is clicked:

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

    This code will set image to maximize.png if current img.src is set to minimize.png and vice versa. For more details visit: Change image onclick with javascript link

    Answer

    Or maybe and that is prob it

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

    Answer

    If your images are named you can reference them through the DOM and change the source.

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

    or

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

    The most you could do is to trigger a background image change when hovering the LI. If you want something to happen upon clicking an LI and then staying that way, then you'll need to use some JS.

    I would name the images starting with bw_ and clr_ and just use JS to swap between them.

    example:

    $("#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);
    
    });
    

    link to fiddle: http://jsfiddle.net/felcom/J2ucD/

    Answer

    Here, when clicking next or previous, the src attribute of an img tag is changed to the next or previous value in an array.

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

    I was able to implement this by modifying this answer: jQuery array with next and previous buttons to scroll through entries

    Answer

    You can try something like this:

    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

    Answer

    This script helps to change the image on click the text:

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

    see the demo here

    Answer

    How about this?

    Doesnt requier so much coding

    $(".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>

    Answer

    If you don't want use js, I think, you can use <a href="javascript:void(0);"></a> instead of img and then use css like

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

    EDIT: Nope. Sorry it works only for :hover

    Answer
    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";
                }
              }
        }
    }
    

    Tags

    Recent Questions

    Top Questions

    Home Tags Terms of Service Privacy Policy DMCA Contact Us

    ©2020 All rights reserved.