изменение изображения при наведении мыши в jquery - PullRequest
Новая
       3

изменение изображения при наведении мыши в jquery

2 голосов
/ 05 августа 2010

html- 

<img id="storyimg" src="images/stor.jpg" alt="img" />  
                <ul class="sb_menu">            
                    <li><a href="linkpage.htm" class="newslink1">Wireless Networking at Fortune Inn, Noida</a></li>
                    <li><a href="linkpage.htm" class="newslink2">18th International Conference on Oral & Maxillofacial Surgery</a></li>
                    <li><a href="linkpage.htm" class="newslink3">WiFi deployment at Vellore Institute of Technology</a></li>                        
                </ul>

Я хочу, чтобы пользователь перемещался по этим li элементам, я хочу изменить изображение следующим образом: * 

<script>
                $('a.newslink1').bind('mouseover', function() {
                $('img#storyimg').src("images/stor1.jpg");
...same for newslink2 and 3, image will be stor2 and 3

, но это не работаетя думаю, что написал неправильно jquery ?????????

Ответы [ 5 ]

12 голосов
/ 05 августа 2010

Использование attr: 

$('img#storyimg').attr("src", "images/stor1.jpg");

Подробнее:

http://api.jquery.com/attr/

4 голосов
/ 05 августа 2010

Ваш код: 

<script>
  $('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').src("images/stor1.jpg");

Ошибка:

Строка 3: используйте 'attr' вместо 'src' like '.attr ("src", "images / stor1.jpg");'

Строка 4: '}); 'отсутствует в конце устава

Правильный код: 

<script>
  $('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').attr("src","images/stor1.jpg");
  });

Если вы хотите изменить изображение в зависимости от ссылки, вы можете код: 

<img id="storyimg" src="images/stor.jpg" alt="img" />  
<ul class="sb_menu">            
  <li><a href="linkpage.htm" class="newslink1" data-image="stor1.jpg">Wireless Networking at Fortune Inn, Noida</a></li>
  <li><a href="linkpage.htm" class="newslink2" data-image="stor2.jpg">18th International Conference on Oral & Maxillofacial Surgery</a></li>
  <li><a href="linkpage.htm" class="newslink3" data-image="stor3.jpg">WiFi deployment at Vellore Institute of Technology</a></li>                        
</ul>

<script>
  //binds the mouseover-event-handler to all Links the are childs of an LI in UL with Class "sb_menu"
  $('UL.sb_menu LI A').bind('mouseover', function(e) { 
    $('img#storyimg').attr("src","images/" + $(e.target).attr('data-image'));
  });
</script>

Улучшение: «img # storyimg» как селектор в порядке, но только «#storyimg» намного быстрее, потому что getElementById (..) - это функция встроенного браузера. Если вы используете "img # storyimg", jquery должен запросить getElementsByTagName ('IMG') и пройти по списку, чтобы найти этот элемент с идентификатором "storyimg". это занимает много времени, равного прямому выполнению getElementById. Идентификатор любого HTML-элемента на странице должен быть унифицирован. см .: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2 («Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документе.»)

2 голосов
/ 05 августа 2010 
$('a.newslink1').bind('mouseover', function() {
$('img#storyimg').attr("src","images/stor1.jpg");
1 голос
/ 01 февраля 2013

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

Вы также можете использовать функцию ".hover ()", например, вот так:

Это между <head> и </head>: 

<script type="text/javascript">
    $(document).ready(function() {
        var src_path = "path/images/";
        var src_suffix = ".jpg";                   
        $('.yourclass').hover(                         
            function () {
            $(this).addClass("hover");
            var active_id = $(this).attr('id');     
            $('#' + active_id + '_pic').attr("src", src_path + active_id + '_big' + src_suffix); 
            },
            function () {
            $(this).removeClass("hover");
            var active_id = $(this).attr('id');
            $('#' + active_id + '_pic').attr("src", src_path + active_id + '_small' + src_suffix);
            }
        );
    });
</script>

А это между <body> и </body>: 

<div class="fruits">
<a href="#" class="yourclass" id="apple">
<img id="apple_pic" src="files/images/apple_small.jpg" alt="apple" title="apple" />
</a>
<!--  -->
<a href="#" class="yourclass" id="pear">
<img id="pear_pic" src="files/images/pear_small.jpg" alt="pear" title="pear" />
</a>
</div>

На одном из наших сайтов это работает хорошо.

Дополнительную информацию о функции .hover () вы можете найти здесь: http://api.jquery.com/hover/

1 голос
/ 05 августа 2010

Вы, вероятно, хотите $('img#storyimg').attr('src','path/to/new/image.jpg');

РЕДАКТИРОВАТЬ: JINX должен, но я кока-кола! : О)

еще одна вещь, экспериментируйте с .mouseenter() и mouseleave().

...