Javascript Swap Images Rollover - PullRequest
Новая
       3

Javascript Swap Images Rollover

0 голосов
/ 27 июня 2010

У меня есть следующий CSS, где изображение 'voice_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>

Javascript 

<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 ]

3 голосов
/ 27 июня 2010

Вы должны использовать CSS: 

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

Это работает даже в IE6!

3 голосов
/ 27 июня 2010

Если вы просто хотите сделать эффект ролловера, я бы настоятельно рекомендовал использовать спрайт и псевдоэлемент: 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 пикселей.Кусок торта.

0 голосов
/ 12 марта 2018

Существует два способа изменить изображения . Вы можете использовать одно изображение или два изображения.

Один метод изображения: 

<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>
0 голосов
/ 27 июня 2010

Чтобы изменить фоновое изображение элемента el в jQuery, вы можете сделать что-то вроде: 

el.css("background-image", "new_bg.png");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...