Question

我有一个JS函数，用于在mouseOver上突出显示蓝色文本，并且我传递两个参数 - id，action in my。我写了2个简单的CSS用于鼠标悬停到蓝色和鼠标输出到黑色。我想添加代码以显示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因为所有图像都有这种格式。例如在mouseover上将调用“image_over.gif”。因此我写了这个。但我的问题是当图像名称在该位置发生变化时，我的功能会崩溃。任何想法怎么做？

Answer 1

使用css代替

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


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

Answer 2

试试这个，这是最简单的

<img src="Images/search-btn.gif" onmouseover="this.src='Images/search-btn-over.gif'" onmouseout="this.src='Images/search-btn.gif'" />

Answer 3

在CSS类中提供背景属性

.AttachOnMouseOverText{
  color: blue;        
  font-size: 10px;
  text-align: center;
  background: url('image_mouseover.gif');
}

.AttachOnMouseOutText{
  color: black;       
  font-size: 10px;
  text-align: center;  
  background: url('image_mouseout.gif'); 
}

Answer 4

Hover on the div tag to change the image.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #container {
            position: absolute;
            width: 50%;
            height: 20%;              
        }
        img {
            width: 50%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            position: absolute;
            left: 25%;
        }
        #right {
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);                
        }
        #container:hover #info {
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }
        #container:hover #right {
            transform: rotateY(360deg);
            -webkit-transform: rotateY(360deg);
        }
    </style>
</head>
<body>
    <div id="container">
        <img id="right" src="right.png" alt="icons" />
        <img id="info" src="info.png" alt="icons" />
    </div>
</body>

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

4 个答案: