Skocz do zawartości
TO_mek

Wyświetlanie obrazka po najechaniu na link

Rekomendowane odpowiedzi

Witam!

Poniższy kod teoretycznie powinien wyświetlać obrazek po najechaniu na linka ale u mnie ignoruje kod JS (testowałem jako plik zewnętrzny i kod wklejony w pliku html). Gdzie tkwi błąd?

 

HTML

<!DOCTYPE html>
    <html lang="pl">
        <head>
            <meta charset="UTF-8">
            <title>Galeria</title>
            <script type="text/javascript" src="galeria02.js"></script>
        </head>
        <body>
            <ul id="offer">
                <li><a href="touchimage/fractal/1.jpg">link 1</a></li>
                <li><a href="touchimage/fractal/2.jpg">link 2</a></li>
                <li><a href="touchimage/fractal/3.jpg">link 3</a></li>
                <li><a href="touchimage/fractal/4.jpg">link 4</a></li>
                <li><a href="touchimage/fractal/5.jpg">link 5</a></li>
                <li><a href="touchimage/fractal/6.jpg">link 6</a></li>
            </ul>
            <div id="img-container">
                <img src="touchimage/fractal/1.jpg" alt="Alt" />
            </div>
        </body>
    </html>

 

 

JS (galeria02.js)

$(function(){
    var imgContainer = $('#img-container'); // kontener, w którym będą się pojawiać obrazki
    var defaultImgSrc = $('#img-container img').attr('src'); // domyślny obrazek, jeśli żaden link nie znajduje się pod kursorem
    var offerList = $('ul#offer li a'); // odnośniki
    offerList.hover(function(){ // zdarzenie po najechaniu na link
        var img = $(this).attr('href'); // pobieramy hrefa z linka
        imgContainer.empty(); // opróżniamy kontener
        $('<img src="'+img+'">').appendTo(imgContainer).hide().stop().fadeIn('fast'); // tworzymy nowy IMG i dodajemy do niego pobranego hrefa
    },function(){ // zdarzenie po zjechaniu z linka
        imgContainer.empty(); // opróżniamy kontener
        $('<img class="default" src="'+defaultImgSrc+'">').appendTo(imgContainer).hide().stop().fadeIn('fast'); // tworzymy nowy IMG i dodajemy do niego domyślny obrazek
    });

    offerList.click(function(e){ // opcjonalnie usuwamy domyślną akcję dla linków
        e.preventDefault();
        return false;
    });
});

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Nie wiem po co tworzysz nowy obrazek, skoro możesz jak wyżej robić $('#img-container img').attr('src', 'nowy src');

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

wklej cały kod poprawiony jeżeli możesz. coś takiego chciałem zrobic, ale nie wiem jak.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

o jezu, temat jest martwy od dwóch lat, proszę pana

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się tutaj

  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

×