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

【问题标题】：I want to change an Image's mouseover and mouseout effects depending upon which function has been called我想根据调用的函数更改图像的鼠标悬停和鼠标悬停效果
【发布时间】：2015-12-09 06:08:50
【问题描述】：

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

我希望这是有道理的。

这是我正在使用的代码。

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

感谢任何帮助！谢谢！

【问题讨论】：

我认为您已经走在正确的轨道上。您可以创建一个函数并在鼠标悬停时调用它。在该函数中检查当前 src，然后使用它来确定要与之交换的图像。
我认为那部分我已经记下了。当我按下按钮时，我可以毫无问题地替换图像。问题是当我尝试在图像被替换后对其应用不同的鼠标悬停功能时。比如，如果显示的图像是“blueshirt.png”，我想将鼠标悬停并显示“greenshirt.png” 如果显示的图像是“redshirt.png”，我想将鼠标悬停并显示“purpleshirt.png”等。跨度>
如何维护一个标志或变量来帮助您识别发生了哪个鼠标悬停事件？这往往是一个非常轻量级的解决方案
您不需要更改鼠标悬停功能。只需将您的逻辑放在现有函数中即可。也许显示鼠标悬停的代码会更清楚地说明什么不起作用。
不幸的是，我没有尝试为每个函数添加鼠标悬停，因此我没有要显示的代码。我似乎无法获得“鼠标悬停”效果来独立使用每个功能。

标签： javascript jquery html image

【解决方案1】：

请阅读：是的，你不应该问这种问题，因为这里不是人们为你工作的地方。

既然你已经标记了 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>

【讨论】：

我很欣赏你的提醒，但要明确一点，我的目的不是让人们为我做我的工作。我只是没有我一直在尝试的所有代码，因为我已经多次擦除并重新编写了所有代码。我不仅仅是想找人为我做这件事，我真的很想学习并且很享受这样做。但是，无论如何，感谢您的解决方案。我真的很感激它，并将能够以此为基础！
@BertHert 我希望我没有伤害你的感情......我花了一些功夫才为你完成这项工作。确实很忙。有很多方法可以做到这一点。
没有受伤的感觉，我只是不想给人一种水蛭的印象。总的来说，我对编码和这个网站都是超级新手。我很欣赏你所做的工作。我很清楚自己想做什么，但只是不知道从哪里开始，因为有很多不同的做事方法，就像你说的那样。
不，你没有……至少你应该知道该问什么，不该问什么。这类问题在这里不予受理。所以作为你的第一天，我真的希望你在这里度过余下的日子......:)

【解决方案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")));
}

【讨论】：