我想显示不同的图像OnMouseOver和OnMouseOut
[英]I want to display different images OnMouseOver and OnMouseOut
问题描述
I have a JS function for highlighting Text in blue on mouseOver and where I am passing two parameters - id, action in my . 
我有一个JS函数，用于在mouseOver上突出显示蓝色文本，并且我传递了两个参数 - id，action in my。 I have written 2 simple css for mouseover to blue and mouseout to black. 我写了2个简单的CSS用于鼠标悬停到蓝色和鼠标输出到黑色。 I want to add code to display different images to onmouseover and onmouseout events. 我想添加代码以显示onmouseover和onmouseout事件的不同图像。 The thing is - I have two different images in one location which displays accordingly when you mouseover and mouseout. 问题是 - 我在一个位置有两个不同的图像，当你鼠标悬停和鼠标移动时相应地显示。 eg Onmouseover - image1........ Onmouseout- image2. 例如Onmouseover - image1 ........ Onmouseout- image2。 I want to make it generic. 我想让它变得通用。
CSS: CSS：
.AttachOnMouseOverText{
color: blue;
font-size: 10px;
text-align: center;
}
.AttachOnMouseOutText{
color: black;
font-size: 10px;
text-align: center;
}
JavaScript : 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 : 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>
If you check I have added third parameter 'img' and making it generic by passing it in document.getElementById. 如果你检查我已经添加了第三个参数'img'并通过在document.getElementById中传递它使其成为通用参数。 #ContactsImagePath# is location where images are stored. ＃ContactsImagePath＃是存储图像的位置。 i have written _over.gif because all the images have this format. 我写了_over.gif因为所有图像都有这种格式。 eg on mouseover "image_over.gif" will be called. 例如，在鼠标悬停时，将调用“image_over.gif”。 hence i have written this. 因此我写了这个。 But my problem is when the image name will change in that location, then my function would crash. 但我的问题是当图像名称在该位置发生变化时，我的功能会崩溃。 any idea how to do it? 任何想法怎么做？
4 个解决方案
解决方案1
1 2014-03-12 07:01:24
use css instead 用css代替
.image_container{
background:url('image1.jpg');
}
.image_container:hover{
background:url('image2.jpg');
}
解决方案2
1 2014-03-12 07:13:54
试试这个，这是最简单的
<img src="Images/search-btn.gif" onmouseover="this.src='Images/search-btn-over.gif'" onmouseout="this.src='Images/search-btn.gif'" />
解决方案3
0 2014-03-12 07:06:07
Give background property in your CSS classes 在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
0 2014-03-12 09:40:59
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.