I want to change an Image's mouseover and mouseout effects depending upon which function has been called

1
votes

I'm new to coding, but am enjoying the learning experience. I've run into something I can't solve.

I hope this makes sense.

Here is the code I am using.

<script>
    function switchDefault() {

        document.getElementById('switch_image').src = "img/portfolio/profileimage.png";

    }

    function switchRed() {

        document.getElementById('switch_image').src = "img/imagetest/redshirt.png";

    }

    function switchYellow() {

        document.getElementById('switch_image').src = "img/imagetest/yellowshirt.png";


    }
</script>



<img src="img/portfolio/profileimage.png"  id="switch_image"
      onmouseover="this.src='img/portfolio/profileimagemove.png'" 
      onmouseout="this.src='img/portfolio/profileimage.png'" 
/>
<button type="button" onclick="switchRed()">Switch Red!</button>
<button type="button" onclick="switchYellow()">Switch Yellow!</button>
<button type="button" onclick="switchDefault()">Switch Back To Default!</button>

I know it's probably not very good, but I'm new to this.

Here is a detailed description of what I am attempting:

I want to change an image src to different img src when I click a button. That's done and it works fine. However, I would like to have a different mouseover effect dependant upon which image has been displayed. For example, if the switchYellow() function has been run, I want the mouseover effect to display "blueshirt.png" If the switchRed() function has been run, I want the mouseover effect to display "greenshirt.png"

Any help is appreciated! Thank you!

2
javascriptjqueryhtmlimage
I think you are on the right track already. You can create one function and call it on mouse over. In that function check the current src and then use it to determine which image you want to swap it with. – mcgraphix
That part I have down, I think. When I press my buttons, I am able to replace the image without a problem. The issue is when I try to apply a different mouseover function to the image once it has been replaced. Like, if the image displayed is "blueshirt.png", I want to mouseover and display "greenshirt.png" If the image displayed is "redshirt.png", I want to mouseover and display "purpleshirt.png" Etc. – BertHert
How about maintaining a flag or a variable which helps you identify which mouse over event has occurred? That tends to be a very light weight solution – AGE
You shouldn't need to change the mouseover function. Just put your logic in the existing function. Maybe showing the code you have for the mouse over would shed some more light on what isn't working. – mcgraphix
Unfortunately, I didn't keep any of the attempts I made to add mouseovers to each function, so I don't have code to display. I just can't seem to get a "onmouseover" effect to work independantly with each function. – BertHert

2 Answers

0
votes

Read This: Yes, you are not supposed to ask this kind of question, as this is not a place where people work for you.

Since you have tagged jQuery, I will get you the jQuery way:

$(function () {
  $("#switchRed").click(function () {
    $("#switch_image").attr({
      "data-hover": "https://placeholdit.imgix.net/~text?txtsize=33&txt=Green&w=150&h=150",
      "src": "https://placeholdit.imgix.net/~text?txtsize=33&txt=Red&w=150&h=150"
    });
    $("#switch_image").hover(function () {
      $(this).attr("data-src", $(this).attr("src"));
      $(this).attr("src", $(this).data("hover"));
    }, function () {
      $(this).attr("src", $(this).data("src"));
    });
  });
  $("#switchYellow").click(function () {
    $("#switch_image").attr({
      "data-hover": "https://placeholdit.imgix.net/~text?txtsize=33&txt=Blue&w=150&h=150",
      "src": "https://placeholdit.imgix.net/~text?txtsize=33&txt=Yellow&w=150&h=150"
    });
    $("#switch_image").hover(function () {
      $(this).attr("data-src", $(this).attr("src"));
      $(this).attr("src", $(this).data("hover"));
    }, function () {
      $(this).attr("src", $(this).data("src"));
    });
  });
  $("#switchDefault").click(function () {
    $("#switch_image").attr({
      "data-hover": "https://placeholdit.imgix.net/~text?txtsize=33&txt=White&w=150&h=150",
      "src": "https://placeholdit.imgix.net/~text?txtsize=33&txt=Default&w=150&h=150"
    });
    $("#switch_image").hover(function () {
      $(this).attr("data-src", $(this).attr("src"));
      $(this).attr("src", $(this).data("hover"));
    }, function () {
      $(this).attr("src", $(this).data("src"));
    });
  });
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Default&w=150&h=150" alt="" id="switch_image" />
<br />
<button type="button" id="switchRed">Switch Red!</button>
<button type="button" id="switchYellow">Switch Yellow!</button>
<button type="button" id="switchDefault">Switch Back To Default!</button>
0
votes

You can add a generic mouse handler that handles the logic:

<img src="img/portfolio/profileimage.png" onmouseover="changeMe(event)" onmouseout="changeMeBack(event)" id="switch_image" />

In the changeMe function add your logic to determine the correct image

function changeMe(event) {
  event.currentTarget.setAttribute("data-original-src", event.currentTarget.getAttribute("src")));
  var newSrc = 'url/to/image.png'';
  if (event.currentTarget.getAttribute("src") === '...') {
    newSrc = 'path/to/someimage.png';
  } else if (event.currentTarget.getAttribute("src") === '...') {
    newSrc = 'path/to/image.png';
  }
  event.currentTarget.setAttribute("src"), newSrc));
}

function changeMeBack(event) {
  event.currentTarget.setAttribute("src", event.currentTarget.getAttribute("data-original-src")));
}