Solution 1 :

You can increment a simple counter everytime the mouse is over the image, and change it to the third image instead of the second once count>=5:

function showHover(img) {
     if (img) {
           img.src="images/img1.jpg";
     }
}
function showNormal(img, change) {
     if (img) {
          img.src=(change)?"images/img3.jpg":"images/img2.jpg";
     }
}
$(document).ready(function() {
     let count = 0;
     $("#img1").mouseover(function(){
          showHover(this);
          count++;
     }).mouseout(function(){
          showNormal(this, count>=5);
     });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img1" src="images/img1.jpg" />

Problem :

I know this should be simple, but for the life of me I cannot figure
it out. I just need a mouseover event where it switches between 2
images until the fifth time you mouseover it changes to a third image.
here is what I have so far.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tamra Schnyder Midterm Q2</title>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function showHover(img) {
    if (img) {
        img.src="images/img1.jpg";
    }
}
function showNormal(img) {
    if (img) {
        img.src="images/img2.jpg"
    }
}
$(document).ready(function() {
    $("#img1").mouseover(function(){
        showHover(this);
    }).mouseout(function(){
        showNormal(this);
    });
});




</script>
</head>
<br>
<h1>picture hover</h1><br/>
<img id="img1" src="images/img1.jpg" />
</body>

Comments

Comment posted by Smokinlizardbreath

thank you so much, I knew it was a counter but I just could not find an example. Thank you Majed!!

By

Leave a Reply

Your email address will not be published. Required fields are marked *