javascript – Change an image with onclick()

javascript – Change an image with onclick()

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

Or maybe
and that is prob it

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

javascript – Change an image with onclick()

How about this? It doesnt require 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>

Leave a Reply

Your email address will not be published.