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()函数，我希望鼠标悬停效果显示＆＃34; blueshirt.png＆＃34; 如果已运行switchRed()函数，我希望鼠标悬停效果显示＆＃34; greenshirt.png＆＃34;

任何帮助表示赞赏！谢谢！

Answer 1

阅读本文：是的，你不应该问这类问题，因为这不是人们为你工作的地方。

由于您已经标记了jQuery，我将以jQuery的方式为您提供：

＆＃13;

$(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"));
    });
  });
});

＆＃13;

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

＆＃13;

Answer 2

您可以添加处理逻辑的通用鼠标处理程序：

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

在changeMe功能中添加逻辑以确定正确的图像

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")));
}

我想根据调用的函数更改Image的mouseover和mouseout效果

2 个答案: