1

サイズが16X16pxのtextbox.pngと24X24ピクセルのIconBG.pngの2つの画像があります。imgタグを次のように定義しています

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

これをクリックすると、imgタグの背景画像を以下のように設定しています-

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


}

しかし、img タグのサイズは事前定義されていないため、最初は 16px を占めます。選択後、背景画像を 24 px に設定しても、サイズは 16px のままです。img タグのサイズを 24px bz として初期化することはできません。アイコンは 24px にリセットされます。

したがって、私の要件は、サイズが 24X24 のプレースホルダーがあり、最初に 16X16 の画像を配置することです。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は2番目のimg（img24px）をオンロードでロードし、JSでデフォルトで発生するような最初の呼び出しではロードしないことです。

于 2013-03-01T09:23:29.030 に答える