How can i create an image to select and deselect using css

Question

I need to create an image where user can select or deselect the record by clicking on the image. If user single clicks on the image it should be selected and should be displayed in Blue color if user again clicks on the record it should be deselected and should be displayed in Black.Black color indicates that it is unselected,Blue indicates selected

Use any of the icon packs like `fontawesome` and toggle the icon on select, https://fontawesome.com/v4.7.0/icon/chain-broken https://fontawesome.com/v4.7.0/icon/link — chintuyadavsara, Dec 10 '18 at 05:58
Possible duplicate of [Can I have an onclick effect in CSS?](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) — robere2, Dec 10 '18 at 06:01
but i need the exact image and if user single clicks on the image it should be selected and should be displayed in Blue color if user again clicks on the record it should be deselected and should be displayed in Black.i am new to this can you help me out — karal kunal, Dec 10 '18 at 06:02

score 2 · Answer 1 · edited Dec 10 '18 at 21:31

You can't do it using css..

Use jQuery and toggleClass on click the icon (I use fontawesome icon)

function toggle(){
$( ".color-change" ).toggleClass( "blue" );
}

.blue{
color:blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


<i class="fas fa-retweet color-change" onclick="toggle()"></i>

Using Javascript

function toggle(){
  var element = document.getElementsByClassName("color-change")[0];
  element.classList.toggle("blue");
}

    .blue{
    color:blue
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


    <i class="fas fa-retweet color-change" onclick="toggle()"></i>

To your comment change the image

function toggle(){
$( ".src-change" ).toggleClass( "far fa-unlink" );
}
function toggleSrc(){
$( ".change-img" ).toggleClass( "far fa-unlink" );
var src = $('.change-img').attr('src');
var newsrc = (src=='https://i.stack.imgur.com/mSXoO.png') ? 'https://i.stack.imgur.com/3mG2d.jpg' : 'https://i.stack.imgur.com/mSXoO.png';
$(".change-img").attr('src', newsrc );
}

.fa-unlink{
color:blue;
}
img{
width:100px;
height:100px;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<p>toggle class to change icon</p>
    <i class="fas fa-link src-change" onclick="toggle()"></i>
<p>toggle src of image to change icon</p>
<img src="https://i.stack.imgur.com/mSXoO.png" class="change-img" onclick="toggleSrc()"/>

but if we see my blue image is different and black image is different in need the same images when clicked and unclicked — karal kunal, Dec 10 '18 at 06:07
yes when it is clicked it should be in blue color and should be same as in the image which i have attached and when again clicked it should be in black color which i have attached — karal kunal, Dec 10 '18 at 06:10
It seems this is possible in CSS using some clever "hacks". https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — robere2, Dec 10 '18 at 06:12
only if you use button or `a` tag... try to do it with `div` it is not so good — לבני מלכה, Dec 10 '18 at 06:13

score 1 · Accepted Answer · answered Dec 10 '18 at 06:15

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  i{color:#000;font-size:30px!important}
  .blueColor{color:#118de8}
</style>
<script>
$(document).ready(function(){
    $("i").click(function(){
        $(this).toggleClass("blueColor");
    });
});
</script>
</head>
<body>

<i class="fa fa-chain-broken" aria-hidden="true"></i>

</body>
</html>

Hope this code will be helpful for you.

I have triggered click event for that icon, by clicking the icon class name ("blueColor) will be added and removed. for "blueColor" css style written to chage icon color to blue color.

score 0 · Answer 3 · answered Dec 10 '18 at 06:05

0

Try this documentation from other users using javascript and css

http://jsfiddle.net/JfGVE/2030/

answered Dec 10 '18 at 06:05

Charlieeeeeeeeee

141
2
11

How can i create an image to select and deselect using css

3 Answers3