通過設置較大的背景圖像突出顯示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中默認會發生的那樣。