изменить изображения с помощью jQuery? - PullRequest
Новая
       19

изменить изображения с помощью jQuery?

1 голос
/ 10 июля 2009

Я пытаюсь изменить изображение в зависимости от элемента списка, над которым вы наведите курсор.

У меня есть контейнер с ул. У меня есть три элемента списка (небольшая горизонтальная навигация). Элементы списка находятся в нижней части контейнера, который оставляет пустое пространство над лиями. Я хочу, чтобы пустое пространство над лиями меняло изображения в зависимости от того, над каким элементом списка я наводил курсор. Там будет 3 разных изображения или, возможно, с использованием CSS спрайтов.

Можно ли как-нибудь сделать это с помощью jQuery?

Ответы [ 2 ]

1 голос
/ 10 июля 2009

HTML: 

<div id="container">
    <img id="yourImg" src="spacer.gif" width="..." height="...">
    <ul id="yourUL">
        <li data-imageswap="someimg.png">One</li>
        <li data-imageswap="another.png">Two</li>
        <li data-imageswap="andathird.png">Three</li>
    </ul>
 </div>

Сценарий: 

$('li','#yourUL').hover(function(){
    $('#yourImg').attr('src',this.getAttribute('data-imageswap'));
}

Вы можете использовать что-то кроме этого атрибута data (например, className или id), чтобы указать на ваше изображение, но это должно быть суть этого.

Вставка прозрачного, 1x1 gif в ваше изображение для начала позволит вам масштабировать его до нужной ширины и высоты. Кроме того, вы можете начать без изображения и записать его в DOM, если хотите начать без него.

0 голосов
/ 10 июля 2009

Для этого вы можете использовать плагин jQuery UI Tabs . Может быть, немного излишним, но это будет работать. Вместо этого вы можете изменить событие, используемое для выбора вкладки при наведении, следующим образом: 

$('.selector').tabs({ event: 'mouseover' });

Вот супер быстрое демо, которое может помочь (я проверял, и это работает), хотя, очевидно, вы захотите использовать свой собственный CSS: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Tabs Test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            $('#tabs').tabs({ event: 'mouseover' });
        });
        //]]>
    </script>
</head>
<body>
    <div id="tabs">
        <div id="tabs-1">
            <img src="images/image1.jpg" alt="image1" />
        </div>
        <div id="tabs-2">
            <img src="images/image2.jpg" alt="image2" />
        </div>
        <div id="tabs-3">
            <img src="images/image3.jpg" alt="image3" />
        </div>
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...