Question

是否可以从包含div中更改图像源？图像是动态的，并从数据库中提取。

v = $"<div onmouseover=\"document.navIcon.src='/Images/White/{reader[2]}';\" 
      onmouseout=\"document.navIcon.src='/Images/{reader[2]}';\">
<img name=\"navIcon\" src=\"Images/{reader[2]}\"><br>{reader[1]}</div>";

这是我对如何做到这一点的看法，但似乎没有按预期工作。当我把onmouseover部分放在＆lt;中时，我能够让它工作。 img＆gt;但是，我希望它能在div中的任何地方进行更改，例如在阅读器[1]文本上，而不是直接在图像上。

思想？

Answer 1

实现这一目标的最佳方法是使用CSS。

<强> HTML

<img id="NavIcon">

<强> CSS

#Navicon {
  background-image: url(image1.jpg);
}
#NavIcon:hover {
  background-image: url(image2.jpg);
}

Answer 2

我刚从谷歌图片中抓取了一些图片。您可以使用this来引用当前元素。

＆＃13;

<img 
     src='https://osu.ppy.sh/forum/images/smilies/50.gif'
     onmouseover='this.src="http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png"'
     onmouseout='this.src="https://osu.ppy.sh/forum/images/smilies/50.gif"'
     />

＆＃13;

编辑..

当您将鼠标悬停在任何带有＆＃34; hoverme＆＃34;班级名称。

＆＃13;

(function() {
  var img1 = "https://osu.ppy.sh/forum/images/smilies/50.gif";
  var img2 = "http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png";
  var myimg = document.getElementById('myimg');
  myimg.src = img1;
  var hoverables = document.getElementsByClassName('hoverme');
  for (var i = hoverables.length; i--;) {
    hoverables[i].addEventListener("mouseover", hoverMe, false);
    hoverables[i].addEventListener("mouseout", unhoverMe, false);
  }

  function hoverMe() {
    myimg.src = img2;
  }

  function unhoverMe() {
    myimg.src = img1;
  }
})();

＆＃13;

<img class='hoverme' id='myimg' />

<p class='hoverme'>poooooooop</p>

<div class='hoverme'>This si a diiiiivvvvv</div>

＆＃13;

使用onmouseover从Div更改图像源

2 个答案: