JSFiddle - React, Tailwind, and code Playground

by Mike Fitzpatrick

HTML

<img src="http://www.fitz.guru/lab/images/icon1-on.png" class="sheild_icon" width="100" height="100" alt="ONE" />
<img src="http://www.fitz.guru/lab/images/icon2-on.png" class="sheild_icon" width="100" height="100" alt="TWO" />

JavaScript

$(".sheild_icon")
    .mouseover(function() {
        this.src = this.src.replace('.png', '-hover.png');
        console.log(this.src);
    })
    .mouseout(function() {
        this.src = this.src.replace('-hover.png', '.png');
        console.log(this.src);
    })
    .click(function() {
        if (this.src.indexOf('-on') > -1) this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
        else this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
        
        console.log(this.src);
    });