懸停圖像中的問題

如何更改此確切代碼以對mouseover執行懸停效果？懸停圖像中的問題

我的HTML代碼是：

<a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter onmouseover="this.src='facebook-hover';" /></a> 
    <a href="#"><img src="images/facebook.png" width="44" height="45" title="Facebook" alt="Facebook"/></a> 
    <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" /></a> 
    <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" /></a>

我不知道如何使用這個JavaScript

請幫助

來源

2014-07-25 user3553281

您還沒有關閉了雙引號的替代文字，也許這就是爲什麼它不工作。 – orb

是的，我已經關閉ALT文本，但鼠標懸停圖像不顯示 – user3553281

試試我已經發布的下面 – orb

試試這個

 <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" onMouseOver="this.src='images/facebook-hover.png'"></img></a> 
     <a href="#"><img src="images/facebook.png" width="44" height="45" title="Facebook" alt="Facebook"/></a> 
     <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" /></a> 
     <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" /></a>

按照烏拉圭回合的心願

 <a href="#" id="parent1" onMouseOver="changesrc(event,'images/twitter_hover.png')"><img id="child1" src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter"></img></a> 
     <a href="#" id="parent2" onMouseOver="changesrc(event,'images/facebook_hover.png')"><img id="child2"src="images/facebook.png" width="44" height="45" title="Facebook" alt="Facebook"></img></a> 
     <a href="#" id="parent3" onMouseOver="changesrc(event,'images/twitter_hover.png')"><img id="child3" src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter"></img></a> 
     <a href="#" id="parent4" onMouseOver="changesrc(event,'images/twitter_hover.png')"><img id="child4" src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter"></img></a>

，並使用這個腳本

function changesrc(event,src_path) { 
var t=event.target.id; 
    $('#'+t).attr('src',src_path) 
}

來源

2014-07-25 05:51:32 PraJen

我試過它的工作，但只有鼠標放下其工作。我需要facebook.png的整個區域必須是鼠標懸停效果 – user3553281

無法得到你的觀點..我只用鼠標懸停..它怎麼會在mousedown中工作..不可能...我想你告訴我在標籤中這樣做RYT？ – PraJen

是的正確我需要 – user3553281

使用此：
HTML：

<a href="#"><img src="images/twitter.png" id="twitter_img" width="44" height="45" title="Twitter" alt="Twitter" onmouseover="test()" /></a>

的JavaScript：

function test(){ 
documnet.getElementById("twitter_img").src="whatever you want to replace it with"; 
}

來源

2014-07-25 05:51:51 orb

我試過它的工作，但只有鼠標停下工作。我需要facebook.png的整個區域必須是鼠標懸停效果 – user3553281

這可能有助於 - 將'onmouseover ='test（）「從''標籤轉移到''標籤。 – orb

你應該有規則的CSS：

a img#twitter{ 
    background-image: url('/images/twitter.png'); 
    width: 44px; 
    height: 45px; 
} 
a img#twitter:hover{ 
    background-image: url('/images/twitter-hover.png'); 
}

和你的HTML應爲：

<a href="#"><img id="twitter" src="images/twitter.png" title="Twitter" alt="Twitter" /></a>

現在你提到確切的代碼我知道。然後，您可以使用：

a img[src="images/twitter.png"]{ 
    background-image: url('/images/twitter.png'); 
    width: 44px; 
    height: 45px; 
} 
a img[src="images/twitter.png"]:hover{ 
    background-image: url('/images/twitter-hover.png'); 
}

http://www.corelangs.com/css/box/hover.html http://kyleschaeffer.com/development/pure-css-image-hover/

來源

2014-07-25 05:59:50 mvidaurre

@ user3553281我的解決方案不適合你嗎？使用CSS或使用Unobtrusive Javascript http://en.wikipedia.org/wiki/Unobtrusive_JavaScript – mvidaurre

試試這個：在img標籤

增加了「懸停src」屬性和的onmouseover = 「測試（本）」。

HTML：

<a href="#"><img src="images/twitter.png" width="44" hover-src="images/twitter.png" height="45" title="Twitter" alt="Twitter" onmouseover="test(this);" /></a> 
    <a href="#"><img src="images/facebook.png" width="44" hover-src="images/facebook.png" height="45" title="Facebook" alt="Facebook" onmouseover="test(this);"/></a> 
    <a href="#"><img src="images/twitter.png" width="44" hover-src="images/twitter.png" height="45" title="Twitter" alt="Twitter" onmouseover="test(this);" /></a> 
    <a href="#"><img src="images/twitter.png" width="44" hover-src="images/twitter.png" height="45" title="Twitter" alt="Twitter" onmouseover="test(this);" /></a>

的Javascript：

function test(objImg){ 
     objImg.src = objImg.getAttribute("hover-src"); 
}

來源

2014-07-25 06:11:34 AmanVirdi

懸停圖像中的問題

回答

相關問題