我正在寻找是否有办法让这些代码不那么笨拙？我认为必须有一种更优雅的方式来制作2个按钮，在悬停和点击时在2个或更多按钮状态之间切换。
谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript">
img1 = "images/buy1.png";
img2 = "images/buy2.png";
function chng(c_img) {
if (c_img.src.indexOf(img1)!= -1) c_img.src = img2;
else c_img.src = img1;
}
img3 = "images/sell1.png";
img4 = "images/sell2.png";
function chng2(c_img) {
if (c_img.src.indexOf(img3)!= -1) c_img.src = img4;
else c_img.src = img3;
}
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#"><img src="images/buy1.png" onclick="chng(this)" name="img" width="115"
border="0" height="50" id="img" /></a>
</div><a href="#"><img src="images/sell1.png" onclick="chng2(this)" name="img2"
width="115" border="0" height="50" id="img2" /></a>
</div>
</body>
</html>
答案 0 :(得分：1)
注意
代码将处理任何链接和图像，其中链接的ID和图像具有某种匹配 - 也可以与data一起使用，但也与非html5浏览器兼容。
您必须为每个不同的图像提供图像或类名，但切换脚本是固定的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var icons = {
buy:{
on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png",
off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
},
sell:{
on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png",
off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
}
}
$(document).ready(function() {
$(".toggleLink").toggle(
function() {
var id = $(this).attr("id");
$("#"+id+"Img").attr("src",icons[id].on);
// OR change the className of the link
// OR use data-toggle - but no need to test the image src
},
function() {
var id = $(this).attr("id");
$("#"+id+"Img").attr("src",icons[id].off);
}
);
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#" id="buy" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="buyImg" width="115"
border="0" height="50" /></a>
<a href="#" id="sell" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="sellImg" width="115"
border="0" height="50" /></a>
</div>
</body>
</html>
更新使用数据属性来证明一个点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".toggleLink").toggle(
function() {
var img = $(this).find("img");
img.attr("src",img.data('toggleon'));
},
function() {
var img = $(this).find("img");
img.attr("src",img.data('toggleoff'));
}
);
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="buy">
<a href="#" class="toggleLink"><img src="images/buy1.png"
data-toggleon="images/buy1.png"
data-toggleoff="images/buy2.png"
width="115" border="0" height="50" id="img" /></a>
</div>
</body>
</html>
PS：看看这里有一个很棒的版本
带有Element with hover then click removes hover effect and click again adds hover again 的答案 1 :(得分：1)
这听起来非常适合使用CSS背景精灵。创建其中包含两种状态的图像，垂直堆叠：
----------------------
| "on" image |
----------------------
----------------------
| "off" image |
----------------------
为您的链接提供一个类，并使用background-image属性将图像应用于元素（使用下面的简写表示法）：
<a href="#" class="buy1"></a>
.buy1 {
display: block;
width: 115px;
height: 50px;
background: transparent url(images/buy1.png) left bottom no-repeat;
}
.buy1.on { background-position: left top; }
然后使用JavaScript，您可以简单地切换类：
$(document).ready(function(){
$("#sell a").on('click',function(){
$(this).toggleClass('on');
});
});
这种方法有许多优点：
修改我要添加，您应该在链接中添加一些真实内容，以便为屏幕阅读器用户提供导航功能。我通常会使用图像替换技术：
<a href="#" class="buy1"><span>Buy Now</span></a>
.buy1 span {
position: absolute;
display: block;
top: -10000px;
left: -10000px;
font-size: 1px;
}
答案 2 :(得分：0)
使用CSS选择器 - 就像这里记录的那样： http://www.w3schools.com/cssref/sel_hover.asp
答案 3 :(得分：0)
如果你的意思是更时尚，那就是css或jquery
http://www.webreference.com/programming/css_stylish/index.html
http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
答案 4 :(得分：0)
看起来很好。我可以使用jQuery：
来考虑更优雅的方式首先，为每个元素提供toggleImg类。然后，为每个按钮指定属性data-toggleon和data-toggleoff。如果您愿意，请删除id和name。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggleImg").on('click',function(){
if($(this).attr('src')==$(this).data('toggleon')){
$(this).attr('src',$(this).data('toggleoff'))
}else{
$(this).attr('src',$(this).data('toggleon'))
}
});
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#"><img src="images/buy1.png" class=toggleImg data-toggleon="images/buy1.png" data-toggleoff="images/buy2.png" width="115" border="0" height="50" /></a>
</div><a href="#"><img src="images/sell1.png" class=toggleImg data-toggleon="images/sell1.png" data-toggleoff="images/sell2.png" width="115" border="0" height="50" /></a>
</div>
</body>
</html>
因此可以轻松扩展代码 - 您可以使用适当的类/属性在任何位置添加新的img，而不必担心添加新的JS。