通过设置较大的背景图像突出显示img标签

Question

我有两个图像，一个是textbox.png，大小为16X16px，另一个是IconBG.png，带有24X24像素。 我定义一个img标签为

<img id="g_TextButton" src="../icons/textbox.png" alt="Text" title="Text" onclick="javascript:void(selectTool(this, 5))"> 

在此点击，我作为如下─

function selectTool(objThis) { 
    //----some code 
    objThis.style.backgroundImage="url('../icons/IconBG.png')"; 


} 

设置背景IMG img标签但是随着img标签大小不是预先定义的，它最初将占用16px。选择后，当我设置24像素的背景图像时，尺寸仍然是16px。我无法将img标签大小初始化为24px bz，即使将16px图标重置为24px。

所以我的要求是有一个大小为24X24的占位符。并且最初在其中放置一个16X16的图像。 Onclick添加24X24px的背景图片。

请帮忙。

Answer 1

所以，你可以只用CSS轻松实现这一点：

HTML：

<div id="container"> 
    <img src="../icons/textbox.png" /> 
</div> 

CSS：

#container { 
    height: 24px; 
    width: 24px; 
    position: relative; 
} 

#container:hover { 
    background-image: url('../icons/IconBG.png'); 
} 

#container img { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

而且好处是，该：悬停将加载第二张图片（img24px）onload而不是第一次调用，就像在JS中默认会发生的那样。