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

【问题标题】：I want to display different images OnMouseOver and OnMouseOut我想显示不同的图像 OnMouseOver 和 OnMouseOut
【发布时间】：2014-04-16 03:36:39
【问题描述】：

我有一个 JS 函数，用于在 mouseOver 上以蓝色突出显示文本，并且我在其中传递两个参数 - id、action 在我的 .我已经为鼠标悬停到蓝色和鼠标悬停到黑色编写了 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 因为所有的图像都有这种格式。例如鼠标悬停时会调用“image_over.gif”。因此我写了这个。但我的问题是，当图像名称在该位置发生变化时，我的功能就会崩溃。知道怎么做吗？

【问题讨论】：

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

标签： javascript html css

【解决方案1】：

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>

【讨论】：

【解决方案2】：

试试这个最简单的

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

【讨论】：

你是正确的 Sumit。但要求是当您将鼠标悬停在文本上时，图像也应该更改。因此我把我所有的事件都放在

【解决方案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'); 
}

【讨论】：

是的。但这仅适用于一张图片。我在一个表单中的不同下有几张图片。

【解决方案4】：

改用css

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


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

【讨论】：

但我的表单中有 10 个这样的图像。那么如何在一个 css 中使其通用？不同的图像存储在一个位置 - #ContactsImagePath#。我正在使用 ColdFusion 技术。
你必须在这里定义一个逻辑，对于 10 个图像，你必须编写 10 个 css 样式声明。将所有图像添加到 sprite 将是一个优化的解决方案。给所有 10 个元素一些 data-image-id ，在鼠标悬停时通过 attr().or data() 提取该 data-image-id 值并将其添加为一个类并在 mouseout 时将其删除。 Css 将负责图像交换，js 将在这里通用。