How to Change an Image on Click Using CSS Alone

How to change an image on click using CSS alone?

You could use an <a> tag with different styles:

a:link    { }
a:visited { }
a:hover   { }
a:active  { }

I'd recommend using that in conjunction with CSS sprites: https://css-tricks.com/css-sprites/

Change image onclick and again change to previous image on clicking again - only using CSS and HTML

Try this:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .checkbox { display: none; }
        .label {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: url(http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-photos.jpg);
        }
        .checkbox:checked + .label {
            background: url(http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-pictures.jpg);
        }
    </style>
</head>
<body>
    <input type="checkbox" class="checkbox" id="checked">
    <label class="label" for="checked"></label>
</body>
</html>

Changing the background image when clicking on the div?

Instead of using onclick, maybe try using something Tomm did. I probably encourage you to create a class for all of these id elements. Since you had a shared background image for the original background before the function is clicked, I added background-position. Here is what I did for the script by making a function that I put in the onload of the body (first portion is for backgrounds when clicked, second portion is for original background and will only show for those that are not clicked):

function onloadPage() {
    // first portion
    $('#sw').click(function() {
        $(this).css("background-position", "0 0");
        document.getElementById("info").innerHTML = 'INFO HERE';
    });
    $('#sl').click(function() {
        $(this).css("background-position", "0 0");
        document.getElementById("info").innerHTML = 'INFO HERE';
    });
    ...

    // second portion
    $('.classname').on('click', function(e) {
        if(!$(e.target).closest('#sw').length) { $('#sw').css("background-position", '0 0'); }
        if(!$(e.target).closest('#sl').length) { $('#sl').css("background-position", '0 0'); }
        ...
}

And then the HTML:

<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td><div class="classname" id="sw" style="background-position:0 0;"></div></td>
        <td><div class="classname" id="sl"></div></td>
        <td id="classinfo" rowspan="3" style="width:325px;"></td>
    </tr>
</table>

Obviously you will have to adjust your background-positions to the way you need it to look.

How to change the size of an image on click?

I would use trandsform, transition, and a timeout to remove the class.

var clicks = 0.00;
var timer;
var img = document.querySelector(".clicked");

function moneyOne() {
  clicks += 0.01;
  document.getElementById("clicks").innerHTML = clicks.toFixed(2);
  img.classList.add("active");
  if (timer) window.clearTimeout(timer);
  timer = window.setTimeout(function() {
    img.classList.remove("active");
  }, 200);
};

.clicked {
  width: 410px;
  height: 200px;
  transition: all .2s ease-in-out;
  transform: scale(1);
}

.clicked.active {
  transform: scale(.6);
}

<p>Money: $<a id="clicks">0.00</a></p>
<img src="https://stackoverflow.design/assets/img/logos/se/se-icon.svg" alt="Increase Money" title="Click Me to increase the Money." type="button" onclick="moneyOne()" class="clicked">

How to toggle between two images on click without using JavaScript

I have found a solution that works without JavaScript:

HTML:

<label>
  <input class="image-toggler" type="checkbox">
  <img class="thumbnail" src="cat-thumbnail.jpg">
  <img class="full" src="cat-full.jpg" loading="lazy">
</label>

CSS:

/* Hide checkbox */
input.image-toggler {
  display: none;
}

/* When checkbox is unchecked, show thumbnail and hide full image */
img.full {
  display: none;
}

/* When checkbox is checked, hide thumbnail and show full image */
input.image-toggler:checked + img.thumbnail {
  display: none;
}

input.image-toggler:checked + img.thumbnail + img.full {
  display: block;
}

This shows the thumbnail when the hidden checkbox is unchecked, and shows the full image when the hidden checkbox is checked. loading="lazy" is for delaying the loading of the full image until the user needs it, but it is not a standard attribute.

how do i change button/image onclick to active state?

I made these two files that cover all:

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Deep East Music</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        .buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
        .buttons[isselected = "true"] { background-color:#ff7373; }
        .buttons[isselected = "false"] { background-color:#cccccc; }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#button1").click(function () {
                $(".buttons").attr("isselected", "false");
                $(this).attr("isselected", "true");

                $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
            });

            $("#button2").click(function () {
                $(".buttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");

                ////Use one of these if you need to reload the iframe
                //$('#myiframe').contentWindow.location.reload(true);
                //$("#myiframe").attr("src", $("#myiframe").attr("src"));
            });

            $("#button3").click(function () {
                $(".buttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
            });

            $("#button4").click(function () {
                $(".buttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
            });

        });

        function ClickedButton1 () {
            $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
            return false;
        };

        function ClickedButton2 () {
            $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
            return false;
        };

        function ClickedButton3 () {
            $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
            return false;
        };

        function ClickedButton4 () {
            $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
            return false;
        };

    </script>
</head>
<body>

    <div>
        <div id="button1" class="buttons" isselected="true">button1</div>
        <div id="button2" class="buttons" isselected="false">button2</div>
        <div id="button3" class="buttons" isselected="false">button3</div>
        <div id="button4" class="buttons" isselected="false">button4</div>

        <iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"></iframe>

        <iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"></iframe>
    </div>
</body>
</html>

And buttons.htm looks like:

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Deep East Music</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        /* CSS Here */
        .iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
        .iframebuttons[isselected = "true"] { background-color:#ff7373; }
        .iframebuttons[isselected = "false"] { background-color:#cccccc; }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#iframebutton1").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton1();
            });

            $("#iframebutton2").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton2();
            });

            $("#iframebutton3").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton3();
            });

            $("#iframebutton4").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton4();
            });

        });
    </script>
</head>
<body>
        <input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" />
        <input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" />
        <input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" />
        <input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" />
</body>
</html>

How to Change an Image on Click Using CSS Alone