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.