使用Javascript更改图像宽度/高度

Question

这是Javascript的新功能，我一直试图在每次发生鼠标悬停时更改HTML页面中图像的大小（宽度/高度），但是，如果在CSS页面中设置了样式，这似乎不起作用。对我来说，这是一个很大的问题，因为我需要使用position属性来设置图像位置。

这是代码。

HTML：

<a  href="#"  onMouseOver="big()" onMouseOut="small()">
<img src="img1.png" name="image1" id="mw">
</a>

CSS：

#mw
{
    position:absolute;
    left:15%;
    top:35%;
    width:146px;
    height:97px;
}

JS：

function big()
{
    document.getElementsByName("image1").style.width=183;
    document.getElementsByName("image1").style.height=121;
}
function small()
{
    document.getElementsByName("image1").style.width=146;
    document.getElementsByName("image1").style.height=97;
}

Answer 1

您只能通过CSS来解决。 有一个:hover -pseudo类，当您将鼠标悬停在特定元素上时，该类将被激活。 对于您的请求，无需使用JavaScript。

#mw:hover {
    width: 183px;
    height: 121px;
}

上面的CSS代码段所做的是：“ 如果将id为mw的元素悬停在元素上，则将宽度和高度分别更改为183px和121px ”。

下面是一个示例。 点击“运行代码段”，然后尝试将鼠标悬停在红宝石图像上。

 #mw { position: absolute; left: 15%; top: 35%; width: 146px; height: 97px; } #mw:hover { width: 183px; height: 121px; } 

 <a href="#"> <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw"> </a> 

Answer 2

只是这样做：

a:hover {transform:scale(1.5,1.5);}  <here you can set the x and y scaling

使用JS，您可以：

document.getElement etc.addEventListener("your event", function(event){
event.target.style.transform = "scale(1.5,1.5)";
});

Answer 3

简单的javascript版本，不需要样式

 var element = document.getElementsByName("image1")[0]; element.setAttribute('width', 146); element.setAttribute('height', 97); function big() { element.setAttribute('width', 183); element.setAttribute('height', 121); } function small() { element.setAttribute('width', 146); element.setAttribute('height', 97); } 

 <a href="#" onMouseOver="big()" onMouseOut="small()"> <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw"> </a>