Question

我有一些代码可以在鼠标悬停时使图像更大：

<script>
function bigImg(x)
{
x.style.height="70px";
x.style.width="237px";
}

function normalImg(x)
{
x.style.height="56px";
x.style.width="218px";
}
</script>

我用以下方法调用这些函数：

<a><img border="0" src="category_icons/addorder.png" onmouseover="bigImg(this)" onmouseout="normalImg(this)"></a>

但我真正想做的就是让bigIMG(x)函数改变图像。我对javascript并不是非常熟悉，并且想知道是否有人知道我可以编码什么，交换图像。图像名称为addorder2.png。我尝试过使用this.src="addorder2.png"; but that is not working.

Answer 1

这样做。将图像src更改为“addorder2.png”。

<script>
function bigImg(x)
{
    x.style.height="70px";
    x.style.width="237px";
    x.src = "addorder2.png";
}

function normalImg(x)
{
    x.style.height="56px";
    x.style.width="218px";
    x.src = " addorder.png";
}
</script>

Answer 2

我的2美分：

LIVE DEMONSTRATION

不要使用内联JS，而是可以设置data.*属性
以及包含所需更改的对象文字并用JS阅读：

<img class="zoom" src="img.jpg" data-enlarge='{"src":"img2.jpg", "zoom":"1.2"}'>

正如您在上面所看到的，我们将使用JS “zoom”

来为每个元素定位JS

function enlarge(){

  var el = this,
      src = el.src,
      data = JSON.parse(el.dataset.enlarge);

  el.src = data.src;
  el.style.transition = "0.3s";
  el.style.transform  = "scale("+data.zoom+")";

  el.addEventListener('mouseleave', function(){
    el.src = src;
    el.style.transform = "scale(1)";
  },false);

}

var $ZOOM = document.querySelectorAll('.zoom');
for(var i=0; i<$ZOOM.length; i++){
  $ZOOM[i].addEventListener('mouseenter', enlarge, false);
}

Answer 3

使用Javascript，您可以编辑img。

的src属性

使用Javascript：

function bigImg()
{
document.getElementById("myImg").src="addorder2.gif";
}

HTML：

<!DOCTYPE html>
<html>
<body>

<img id="myImg" onmouseover="bigImg()" src="addorder.png">

</body>
</html>

我建议您查看w3schools以了解有关image document manipulation的更多信息，当然还有专门获取和设置image src element

Answer 4

根据功能改变x.src属性：

function bigImg(x)
{
    x.style.height="70px";
    x.style.width="237px";
    x.src = "category_icons/addorder2.png";
}

function normalImg(x)
{
    x.style.height="56px";
    x.style.width="218px";
    x.src = "category_icons/addorder.png";
}

Javascript onMouseover交换图像

4 个答案: