JSFiddle - React, Tailwind, and code Playground

by Bhesh Gurung

HTML

<head>
    <script>
        var wasClicked = false;

        function handleClick(img) {
            wasClicked = true;
            img.src = 'http://www.clker.com/cliparts/1/5/6/8/11949847551060334388button-purple_benji_park_01.svg.med.png';
        }
        
        function handleMouseOut(img) {
            if(wasClicked) {
                wasClicked = false;
                return;
            }
            img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Button_Icon_BlueSky.svg/300px-Button_Icon_BlueSky.svg.png';
        }
    </script>
</head>



<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Button_Icon_BlueSky.svg/300px-Button_Icon_BlueSky.svg.png" onmouseover="this.src='http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Button_Icon_Violet.svg/300px-Button_Icon_Violet.svg.png'" onmouseout="handleMouseOut(this)" onclick="handleClick(this)" />