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))">

点击此处，我正在为img标签设置背景img，如下所示 -

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


}

但由于img标签大小未预定义，它最初将占用16px。选择后，当我设置24 px的背景图像时，大小仍为16px。我无法将img标签大小初始化为24px bz，即使16px图标也会重置为24px。

所以我的要求是有一个24X24尺寸的占位符。最初放入一个16X16的img。 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;
}

好处是，：hover将加载第二个img（img24px）onload而不是第一次调用，就像在JS中默认情况一样。

通过设置更大尺寸的背景图像突出显示img标记

1 个答案: