Javascript交换图片翻转

Question

I have the following CSS where an image 'vote_up' is a background image. 我有以下CSS，其中“ vote_up”图像是背景图像。 I'd like to alter the javascript to swap images on rollover. 我想更改javascript以在翻转时交换图像。

The JS code below makes a call to database. 下面的JS代码调用了数据库。 Is there a way to call a mouseover function with background images? 有没有办法用背景图像调用鼠标悬停功能？ If not can you provide another solution? 如果不能，您可以提供其他解决方案吗？

CSS 的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 Java脚本

<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. 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 的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>

Answer 1

You should use CSS: 您应该使用CSS：

a.vote_up:hover {
    background: url(...);
}

This even works in IE6! 这甚至可以在IE6中使用！

Answer 2

If you're just looking to do the rollover effect, then I'd would strongly recommend using a sprite and the :hover pseudo element. 如果您只是想进行翻转效果，那么我强烈建议您使用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; }

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. 每个像素（在这种情况下）为30像素。 Piece of cake. 小菜一碟。

Answer 3

要在jQuery中更改元素el的背景图片，您可以执行以下操作：

el.css("background-image", "new_bg.png");

Answer 4

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>

Javascript交换图片翻转

问题描述

4 个解决方案

解决方案1
3 已采纳 2010-06-27 03:25:47

解决方案2
3 2010-06-27 03:27:53

解决方案3
0 2010-06-27 03:21:17

解决方案4
0 2018-03-12 06:09:52

Javascript交换图片翻转

问题描述

4 个解决方案

解决方案1 3 已采纳 2010-06-27 03:25:47

解决方案2 3 2010-06-27 03:27:53

解决方案3 0 2010-06-27 03:21:17

解决方案4 0 2018-03-12 06:09:52

解决方案1
3 已采纳 2010-06-27 03:25:47

解决方案2
3 2010-06-27 03:27:53

解决方案3
0 2010-06-27 03:21:17

解决方案4
0 2018-03-12 06:09:52