Toggling between image src on hover and on click

Question

I have two versions of an image - a greyed out image and a color version of the same image. In the normal state, the image is greyed out. When hovered or clicked on, the image becomes the colored version.

I know this can be done with either toggleClass/addClass/etc or changing the attr(src). I've managed to have this working with hover, but I cannot get the click element to work.

These are the images and the page I am trying to work with - http://www.expatlifeinsurance.com/contact-health-insurance/

This is the code I have right now:

<div id="smokers">
<img id="nosmoke" src="http://www.expatlifeinsurance.com/images/smoke_no_grey.png">
    &nbsp;&nbsp;
<img id="smoke" src="http://www.expatlifeinsurance.com/images/smoke_grey.png">
</div>

$("#nosmoke")
.mouseover(function() {
this.src = this.src.replace('http://www.expatlifeinsurance.com/images/smoke_no_grey.png', 'http://www.expatlifeinsurance.com/images/smoke_no_green.png');
})
.mouseout(function() {
this.src = this.src.replace('http://www.expatlifeinsurance.com/images/smoke_no_green.png', 'http://www.expatlifeinsurance.com/images/smoke_no_grey.png');
})
.click(function() {
$(this).toggleClass("off");
if ($(this).hasClass("off")) this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
else this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
}
);

Please add your code to the question. ideally in a working snippet so we can see the issue. — Rory McCrossan, Mar 01 '18 at 11:04
Also note that you can achieve this in pure CSS: https://codepen.io/jahid-webdev/pen/JRPvBj although note that you'd need to amend this to use the [IE specific filter for greyscale](https://stackoverflow.com/questions/14813142/internet-explorer-10-howto-apply-grayscale-filter) if you need IE support — Rory McCrossan, Mar 01 '18 at 11:05
you can change it on hover and on click using jquery look at this post. https://stackoverflow.com/questions/23959132/jquery-img-src-change-on-hover-and-on-click — Med Elgarnaoui, Mar 01 '18 at 11:09
@MohamedElgarnaoui I have tried this code but it did not work for me. Please see above I will edit the question. — Char, Mar 01 '18 at 11:17

score 0 · Answer 1 · answered Mar 01 '18 at 12:20

After looking for your code, I was concluded that this code work perfectly you can try this. if it help you to resolve your problem.

the click function works perfectly look at the result in the inspect element at your browser

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="smokers">
        <img id="nosmoke" src="http://www.expatlifeinsurance.com/images/smoke_no_grey.png">
            &nbsp;&nbsp;
        <img id="smoke" src="http://www.expatlifeinsurance.com/images/smoke_grey.png">
        </div>

</body>

<script>
        $(document).ready(function() {

           $("#nosmoke").mouseover(function() {
               this.src = this.src.replace('http://www.expatlifeinsurance.com/images/smoke_no_grey.png', 'http://www.expatlifeinsurance.com/images/smoke_no_green.png');
           });

           $("#nosmoke").mouseout(function() {
               this.src = this.src.replace('http://www.expatlifeinsurance.com/images/smoke_no_green.png', 'http://www.expatlifeinsurance.com/images/smoke_no_grey.png');
           });

           $("#nosmoke").click(function() {
               $(this).toggleClass("off");
               if ($(this).hasClass("off")){ 
                   this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
               }
               else {
                   this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
               }
           });
       });
</script>
</html>

no you can see at your insepect element in your browser – Med Elgarnaoui Mar 05 '18 at 12:01 — Med Elgarnaoui, Mar 05 '18 at 12:01

Toggling between image src on hover and on click

1 Answers1