Javascript交换图片翻转
[英]Javascript Swap Images Rollover
问题描述
我有以下CSS，其中“ vote_up”图像是背景图像。 我想更改javascript以在翻转时交换图像。
下面的JS代码调用了数据库。 有没有办法用背景图像调用鼠标悬停功能？ 如果不能，您可以提供其他解决方案吗？
的CSS
<style type='text/css'>
body {
background: #e8e6de;
}
a {
outline:none;
}
.entry {
width: 710px;
background: #ffffff;
padding:8px;
border:1px solid #bbbbbb;
margin:5px auto;
-moz-border-radius:8px;
}
span.link a {
font-size:150%;
color: #000000;
text-decoration:none;
}
a.vote_up, a.vote_down {
display:inline-block;
background-repeat:none;
background-position:center;
height:16px;
width:16px;
margin-left:4px;
text-indent:-900%;
}
a.vote_up {
background:url("images/thumb_up.png");
}
a.vote_down {
background:url("images/thumb_down.png");
}
</style>
Java脚本
<script type='text/javascript'>
$(function(){
$("a.vote_up").click(function(){
<!-- Required click function omitted for this example-->
}
});
</script>
可能使用这样的东西吗？ CSS中没有定义图像名称属性。 有办法叫出来吗？
<script type="text/javascript">
<!--
function roll(img_name, img_src)
{
document[img_name].src = img_src;
}
//-->
</script>
的HTML
<a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>' onmouseover="roll('vote_up', 'images/thumb_up_green.png')" onmouseout="roll('vote_up', 'images/thumb_up.png')">Vote Up!</a>
4 个解决方案
解决方案1
3 已采纳 2010-06-27 03:25:47
您应该使用CSS：
a.vote_up:hover {
background: url(...);
}
这甚至可以在IE6中使用！
解决方案2
3 2010-06-27 03:27:53
如果您只是想进行翻转效果，那么我强烈建议您使用sprite和：hover伪元素。
.vote_button { background-position:left top; background-image: url('http://yoursite.com/images/your_vote_button_sprite.jpg'); width: 30px; height: 30px; }
.vote_button:hover { background-position:left bottom; }
使您的精灵两个图像（上下左右）并排放置。 每个像素（在这种情况下）为30像素。 小菜一碟。
解决方案3
0 2010-06-27 03:21:17
要在jQuery中更改元素el的背景图片，您可以执行以下操作：
el.css("background-image", "new_bg.png");
解决方案4
0 2018-03-12 06:09:52
有两种方法可以更改图像 。 您可以使用一张图像，也可以使用两张图像。
一种图像方法：
<html>
<head>
<title>test</title>
<style>
.altericon{width:130px; display:block; height:33px; line-height:33px; overflow:hidden; background-image:url(altericon.jpg); background-repeat:no-repeat; background-position:left top;}
.altericon:hover{background-position:left -34px;}
</style>
</head>
<body>
<a href="" class="altericon"></a>
</body>
</html>
两种图像方法：
<html>
<head>
<title>test</title>
<style>
.altericon1{width:130px; display:block; height:33px; line-height:33px; overflow:hidden; background-image:url(icon1.jpg); background-repeat:no-repeat; }
.altericon2{width:130px; display:block; height:33px; line-height:33px; overflow:hidden; background-image:url(icon2.jpg); background-repeat:no-repeat; }
</style>
</head>
<body>
<a href="" class="altericon1" OnMouseOver = "this.className='altericon1'" OnMouseOut = "this.className='altericon2' "></a>
</body>
</html>
Javascript-单击或翻转时交换图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.