javascript - 我想显示不同的图像 OnMouseOver 和 OnMouseOut

Question

我有一个 JS 函数，用于在 mouseOver 上以蓝色突出显示文本，我在其中传递两个参数 - id，我的 .我已经编写了 2 个简单的 css，用于将 mouseover 设置为蓝色，将 mouseout 设置为黑色。我想添加代码以在 onmouseover 和 onmouseout 事件中显示不同的图像。事情是 - 我在一个位置有两个不同的图像，当您将鼠标悬停和鼠标移开时，它们会相应地显示。例如Onmouseover - image1........ Onmouseout- image2。我想让它通用。

CSS:

.AttachOnMouseOverText{
    color: blue;        
    font-size: 10px;
    text-align: center;
}
.AttachOnMouseOutText{
    color: black;       
    font-size: 10px;
    text-align: center;     
}

JavaScript:

function highlightBG(id,action,img) {   
    if(action==0)
    {
        document.getElementById(id).className='AttachOnMouseOverText';
    document.getElementById(img).src='#ContactsImagePath#'+ img+'_over.gif';            
    }
    else
    {
        document.getElementById(id).className='AttachOnMouseOutText';           
    document.getElementById(img).src='#ContactsImagePath#'+ img+'.gif';             

    }
}

HTML:

<td align="center" class="AttachOnMouseOutText" id="folderid" nowrap="nowrap" valign="top" onClick="go('addfolder');" onMouseOver=" highlightBG('folderid',0, 'icon_folder');this.style.cursor='hand'; return true;" onMouseOut="highlightBG('folderid',1, 'icon_folder'); return true;">
<p class="Margin"><img name="icon_folder" id="icon_folder" src="#ContactsImagePath#icon_folder.gif" alt="Add Folder" align="middle" border="0" ></p>
<span>Add Folder</span>                         

如果您检查我是否添加了第三个参数“img”并通过将其传递到 document.getElementById 使其通用。 #ContactsImagePath# 是存储图像的位置。我写了 _over.gif 因为所有的图像都是这种格式。例如在鼠标悬停时将调用“image_over.gif”。因此我写了这个。但我的问题是当图像名称在那个位置发生变化时，我的函数就会崩溃。知道怎么做吗？

Answer 1

改用css

.image_container{
         background:url('image1.jpg');
}


.image_container:hover{
         background:url('image2.jpg');
}