Change background-image on hover, but also on click with jQuery

Question

The background image is an image of an office. The background image will have a few <a> tags where the person can click. For example: there is an <a> tag on a computer that's on the desk. Taking this example, I want to do the following:

• Hovering on the <a> tag that is over the computer, will load in a picture of the same office, however, the computer has been outlined with a white line in photoshop ( Lets say: img/bureau2 ). Indicating that it is interactable. Hovering away from this will return it to the original picture which you see when you enter site ( img/bureau1 )

• You can also click on the <a> tag. This will open up another image ( img/bureau3 ).

So far I managed to get the change on hover and click to work. Issue is, hovering away from the <a> tag will cancle the click .

This is what I have so far, how can I tackle this issue?

 $(".computerHover").hover(function() { $("#backgroundImage").attr('src', 'img/bureau2.png'); }, function() { $("#backgroundImage").attr('src', 'img/bureau.png'); }); $(".computerHover").click(function() { $("#backgroundImage").attr('src', 'img/bureau3.png'); });

 #pagina2 { width: 100%; height: 100%; } #backgroundImage { height: 100vh; width: 100vw; z-index: 0; display: block; } .computerHover { width: 105px; height: 75px; position: absolute; right: 28vw; top: 40vh; z-index: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pagina2"> <div id="pagina2Background"> <img id="backgroundImage" src="img/bureau.png"> <div class="computer"> <a class="computerHover"></a> </div> </div> </div>

Answer 1

To do what you want you'll need to keep some sort of state that indicates that the user clicked instead of just hover. In the click handler you could add a class or data-* to #backgroundImage element that you later check when you un-hover.

Example codesanbox .

Answer 2

Seems to me, what you are trying to do, is an image map . But for the sake of your question, I will focus on one particular link.

The reason the click generated image disappears when you move the mouse, is because it is still bound to the previous hover event. The hover method is a shortcut for mouseenter and mouseleave . In order to circumvent that, you need to unbind that event handler.

EDIT: I reworked my answer to more closely resemble the code in your question. In order to "reset" the image, I would suggest using a link that the user can click to make it less confusing for them.

 function switchImage() { $(".computerHover").hover(function() { $("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Computer'); }, function() { $("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office'); }); } // attach the hover events when page loads switchImage(); $(".computerHover").on("click", function() { $(this).off("mouseenter mouseleave"); $("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=New Background'); }); // reattach hover handlers and set image back to default $(".reset").on("click", function() { switchImage(); $("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office'); });

 #pagina2 { width: 100%; height: 100%; } #backgroundImage { height: 100vh; width: 100vw; z-index: 0; display: block; } .computerHover { width: 105px; height: 75px; position: absolute; right: 28vw; top: 40vh; z-index: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="pagina2"> <div id="pagina2Background"> <a class="reset">Start Over</a> <img id="backgroundImage" src="http://via.placeholder.com/300x300.png?text=Office"> <div class="computer"> <a class="computerHover">Computer</a> </div> </div> </div>