Skocz do zawartości

Wyświetlanie obrazka po najechaniu na link

TO_mek

Przez TO_mek
w HTML, PHP, mySQL, JavaScript

 Udostępnij

Rekomendowane odpowiedzi

TO_mek Forum Veteran

TO_mek

Opublikowano
Opublikowano

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;
    });
});

Odnośnik do komentarza
Udostępnij na innych stronach
  • 1 rok później...

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

Jedynie 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ę poniżej.

Zaloguj się
 Udostępnij
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...