Изменить источник изображения на ролловере с помощью jQuery - PullRequest
Новая
       132

Изменить источник изображения на ролловере с помощью jQuery

442 голосов
/ 12 февраля 2009

У меня есть несколько изображений и их ролловер. Используя jQuery, я хочу показать / скрыть изображение ролловера, когда происходит событие onmousemove / onmouseout. Все имена моих изображений следуют одной и той же схеме, например:

Исходное изображение: Image.gif

Rollover Image: Imageover.gif

Я хочу вставить и удалить "over" часть источника изображения в событиях onmouseover и onmouseout, соответственно.

Как я могу сделать это с помощью jQuery?

Ответы [ 14 ]

3 голосов
/ 23 мая 2009 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
    #box{
        width: 68px;
        height: 27px;
        background: url(images/home1.gif);
        cursor: pointer;
    }
</style>

<script type="text/javascript">

$(function(){

    $('#box').hover( function(){
        $('#box').css('background', 'url(images/home2.gif)');

    });
    $('#box').mouseout( function(){
        $('#box').css('background', 'url(images/home1.gif)');

    });

});
</script>
</head>

<body>
<div id="box" onclick="location.href='index.php';"></div>
</body>
</html>
2 голосов
/ 14 февраля 2013

Я сделал что-то вроде следующего кода:)

Работает только, когда у вас есть второй файл с именем _hover, например, facebook.png и facebook_hover.png

$('#social').find('a').hover(function() {
    var target = $(this).find('img').attr('src');
    //console.log(target);
    var newTarg = target.replace('.png', '_hover.png');
    $(this).find('img').attr("src", newTarg);
}, function() {
    var target = $(this).find('img').attr('src');
    var newTarg = target.replace('_hover.png', '.png');
    $(this).find('img').attr("src", newTarg);
});
1 голос
/ 15 июля 2016

Адаптировано из кода Ричарда Айотта - Для нацеливания на img в списке ul / li (находится здесь через класс div-оболочки), что-то вроде этого: 

$('div.navlist li').bind('mouseenter mouseleave', function() {    
    $(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'), 
    'data-alt-src':$(this).find('img').attr('src') }
);
1 голос
/ 15 апреля 2012 
<img src="img1.jpg" data-swap="img2.jpg"/>



img = {

 init: function() {
  $('img').on('mouseover', img.swap);
  $('img').on('mouseover', img.swap);
 }, 

 swap: function() {
  var tmp = $(this).data('swap');
  $(this).attr('data-swap', $(this).attr('src'));
  $(this).attr('str', tmp);
 }
}

img.init();
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...