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

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

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

Есть ли способ, чтобы это произошло с jQuery?

источник

2009-07-09 Anonymous

Для этого вы можете использовать плагин 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>

источник

2009-07-10 00:40:44

орех и кувалда весной на ум. Зачем вам использовать вкладки для того, что он хочет? – redsquare

Потому что это в основном такая же функциональность (зависание над элементами списка, чтобы скрыть/показать связанный контент), и если он не особенно осведомлен, это будет простое внедрение (особенно если у него уже есть пользовательский интерфейс jQuery, запущенный на сайте). Конечно, я не знаю его точных обстоятельств, учитывая, что он не разместил ни одного кода. Есть сотни различных способов, которыми он мог это сделать, это всего лишь один. В зависимости от того, что он на самом деле хочет, мой предпочтительный метод будет чистым решением CSS. –

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, если вы хотите начать без него.

источник

2009-07-10 14:48:01 ajm

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

ответ

Смежные вопросы