locked
Having images representing checkboxes true/false RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1885804455 posted

    Is there a way I could have images representing a checkbox true or false? So basically the same functionallity, but with images.

    Monday, May 16, 2016 8:06 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2010311731 posted

    Here is a CSS generator that you can use...

    http://www.csscheckbox.com/css-checkbox-generator.php

    Matt

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 16, 2016 10:18 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User36583972 posted

    Hi Ptolemy,

    You can try the following code.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function swapImage(imgID) {
            var imgok = "images/OK1.PNG";
            var imgno = "images/NO1.PNG";
            var theImage = document.getElementById(imgID);
            var theState = theImage.src;
            if (theState.indexOf(imgok) != -1) {
                theImage.src = imgno;
                //alert('UN - check');
            }
            else {
                theImage.src = imgok;
                //alert('Checked!')
            }
        }

        function preloadImages() {
            for (var i = 0; i < arguments.length; i++) {
                var tmp = new Image();
                tmp.src = arguments[i];
            }
        }



    </script>
</head>
<body onload="preloadImages('images/NO1.PNG');">
    <form id="form1" runat="server">
        <div>
            <img id="item1" onclick="swapImage('item1')" src="images/NO1.PNG" alt="" />

        </div>
    </form>
</body>
</html>

    Best Regards,

    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 17, 2016 7:25 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2010311731 posted

    Here is a CSS generator that you can use...

    http://www.csscheckbox.com/css-checkbox-generator.php

    Matt

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 16, 2016 10:18 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User36583972 posted

    Hi Ptolemy,

    You can try the following code.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function swapImage(imgID) {
            var imgok = "images/OK1.PNG";
            var imgno = "images/NO1.PNG";
            var theImage = document.getElementById(imgID);
            var theState = theImage.src;
            if (theState.indexOf(imgok) != -1) {
                theImage.src = imgno;
                //alert('UN - check');
            }
            else {
                theImage.src = imgok;
                //alert('Checked!')
            }
        }

        function preloadImages() {
            for (var i = 0; i < arguments.length; i++) {
                var tmp = new Image();
                tmp.src = arguments[i];
            }
        }



    </script>
</head>
<body onload="preloadImages('images/NO1.PNG');">
    <form id="form1" runat="server">
        <div>
            <img id="item1" onclick="swapImage('item1')" src="images/NO1.PNG" alt="" />

        </div>
    </form>
</body>
</html>

    Best Regards,

    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 17, 2016 7:25 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User2031412921 posted

    Hai 

    refer this link for your reference...

    http://dailydotnettips.com/2011/07/07/displaying-images-with-asp-net-checkboxlist-control/

    Regards,

    meenaravi

    Tuesday, May 17, 2016 10:31 AM