Question

function roll_over(img_name, img_src) {
document[img_name].src = img_src;
}

<a href="..."
onmouseover="roll_over('but100', '...')"
onmouseout="roll_over('but100', '...')">
<img src="..." name="but100" />
</a>

我使用此代码显示T恤并在鼠标悬停时显示缩放图像。我想动态调整onmouseover图像的大小。图像是190x190px但我希望它们以160x160px显示而不会过多地改变代码。什么是最好的方式？

Answer 1

你不需要一个JS只需普通的css即可。

img:hover{
   width:160px;
   height:160px;
}

img{
    width:120px;
    height:120px;
}

DEMO

Answer 2

只需在HTML中使用缩小的图像高度和宽度即可。和JS / JQuery调整大小：

$('#imageId').attr('height', 190).attr('width', 190);

Answer 3

另一种解决方案是让img为100％的href大小：

a:hover {
    width:160px;
    height:160px;
}

a {
    position: relative;
    display: block;
    width:120px;
    height:120px;
}

img { 
    width: 100%; 
    height:100%; 
}

Answer 4

使用javascript可以将其作为

完成

HTML

<a onmouseover="roll_over(this,true)" onmouseout="roll_over(this,false)">
<img src="http://www.anotherlogosite.com/images/loghi/set01/engine_positivo_preview.jpg"

/＆GT;

的Javascript

function roll_over(ctrl,isMouseOver)
{
    var height,width;
    if(isMouseOver)
    {
        height="190px";
        width="190px";
    }
    else{
        height="160px";
        width="160px";
    }
    $(ctrl).find("img").css({"width":width,"height":height});
}

或者通过css作为

img
{
    width:160px;
    height:160px;
}

img:hover
{
    width:190px;
    height:190px;
}

链接here

和here

javascript在悬停时更改图像（内联）

4 个答案: