javascript - 我想根据调用的函数来更改图像的鼠标悬停和鼠标悬停效果

Question

我是编码新手，但很享受学习体验。我遇到了一些无法解决的问题。

我希望这是有道理的。

这是我正在使用的代码。

<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>

我知道这可能不太好，但我对此很陌生。

这是我正在尝试的详细描述:

我想在单击按钮时将图像 src 更改为不同的 img src。这样就完成了并且运行良好。但是，我希望根据显示的图像有不同的鼠标悬停效果。例如，如果 switchYellow() 函数已运行，我希望鼠标悬停效果显示“blueshirt.png” 如果 switchRed() 函数已运行，我希望鼠标悬停效果显示“greenshirt.png”

感谢任何帮助!谢谢!

Answer 1

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

既然你已经标记了 jQuery，我将为你提供 jQuery 方式:

$(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>