我想顯示不同的圖像OnMouseOver和OnMouseOut

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因為所有圖像都有這種格式。 例如，在鼠標懸停時，將調用“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 個解決方案

解決方案1
1 2014-03-12 07:01:24

解決方案2
1 2014-03-12 07:13:54

解決方案3
0 2014-03-12 07:06:07

解決方案4
0 2014-03-12 09:40:59

我想顯示不同的圖像OnMouseOver和OnMouseOut

問題描述

4 個解決方案

解決方案1 1 2014-03-12 07:01:24

解決方案2 1 2014-03-12 07:13:54

解決方案3 0 2014-03-12 07:06:07

解決方案4 0 2014-03-12 09:40:59

解決方案1
1 2014-03-12 07:01:24

解決方案2
1 2014-03-12 07:13:54

解決方案3
0 2014-03-12 07:06:07

解決方案4
0 2014-03-12 09:40:59