悬停图像中的问题

如何更改此确切代码以对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

悬停图像中的问题

回答

相关问题