Javascript Swap Images Rollover
Question
I have the following CSS where an image 'vote_up' is a background image. I'd like to alter the javascript to swap images on rollover.
The JS code below makes a call to database. Is there a way to call a mouseover function with background images? If not can you provide another solution?
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>
Javascript
<script type='text/javascript'>
$(function(){
$("a.vote_up").click(function(){
<!-- Required click function omitted for this example-->
}
});
</script>
Possibly Use Something Like This? There is no image name attribute defined in the CSS. Is there a way to call that out?
<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 answers
solution1
3 ACCPTED 2010-06-27 03:25:47
You should use CSS:
a.vote_up:hover {
background: url(...);
}
This even works in IE6!
solution2
3 2010-06-27 03:27:53
If you're just looking to do the rollover effect, then I'd would strongly recommend using a sprite and the :hover pseudo element.
.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; }
Make your sprite two images (the non-rolled over and the rolled over one) side by side, above and below each other. Each one (in this case) would be 30 px. Piece of cake.
solution3
0 2010-06-27 03:21:17
要在jQuery中更改元素el的背景图片，您可以执行以下操作：
el.css("background-image", "new_bg.png");
solution4
0 2018-03-12 06:09:52
There are two methods to alter the images . You can use one image, or use two images.
One image method:
<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>
Two images method:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.