1

我有两张图片，一张是大小为 16X16px 的 textbox.png，另一张是 24X24 像素的 IconBG.png。我将 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图标重置为 24 像素。

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

请帮忙。

4

1 回答 1

3

因此，您可以仅使用 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 中默认发生的那样。

于 2013-03-01T09:23:29.030 回答