Изменение большого изображения в галерее при наведении мыши на эскизы

В настоящее время у меня есть галерея, которая меняет большее изображение при нажатии на меньшее. Вот самый важный код:

.n1:focus span
{
background: url('images/Boot.png')
}

потом

<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>

Я не могу понять, как это сделать при наведении или при наведении мыши.

Вот пример того, что мне нужно: http://thelittleappfactory.com/ripit/

У кого-нибудь есть понимание? Я попытался использовать javascript, чтобы открыть ссылку при наведении мыши, но мой браузер увидел ее как всплывающее окно.


javascript hover onmouseover gallery jquery-hover
person Christian    schedule 22.01.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Прежде всего, вам нужно иметь миниатюру и большую версию ваших изображений. В вашем коде у вас, кажется, есть одно изображение. Большие изображения должны быть скрыты с помощью css display:none и абсолютно позиционированы, чтобы все они были друг над другом. Я бы использовал события jquery mouseenter и mouseleave. Событие mouseover запускается, когда курсор перемещается по элементу, и генерирует слишком много вызовов.

    <div class="item n1">
        <img class="thumb" src="images/boot_thumb.png" alt="boot/>
        <img class="big" src="images/boot_big.png" alt="boot/>
    </div>

Этот код javascript сделает свое дело:

    $('item').mouseenter(function(){
        $(this).children('big').fadeIn();
    });

    $('item').mouseleave(function(){
        $(this).children('big').fadeOut();
    });
person gtsouk    schedule 22.01.2013
comment
У меня есть только одно изображение, но я использовал css (class=thumb n1) для его размера. Я попробую и вернусь - person Christian; 23.01.2013

arrow_upward
0
arrow_downward

На самом деле я нашел способ сделать это с помощью чистого CSS. Я думал, что это довольно феноменально, потому что мне сказали, что это невозможно и, кажется, в этом есть необходимость. Вот исходный код для этой техники:

http://ostmosis.com/OnHoverChangeImage.zip

person Christian    schedule 23.01.2013