Chmurki w jQuery

Autor: Bartek Bilicki, dodano: 16-11-2009
Kategoria: Programowanie i tworzenie

Dzięki frameworkowi jQuery stworzysz w 5 min profesjonalnie wyglądające "chmurki" (ang. "cloud") opisujące elementy Twojej strony!

Chociaż wielu z nas używa atrybutów 'title' dla linków i 'alt' dla obrazków, to tak naprawdę, każdy wie, że poza ich zastosowaniem w pozycjonowaniu czy dostępności strony, same w sobie nie oferują naszej stronie żadnej ciekawej funkconalności.

 

Dzięki frameworkowi jQuery stworzymy dzisiaj "chmurki" oparte na atrybutach 'title' oraz 'alt', które sprawią, że nasza strona nabierze dynamiki.

 

 

Struktura HTML

Na początku stwórzmy jakiś prosty szablon HTML, na przykład taki:

<html>
    <head>
        <title>jQuery - chmurki</title>
        <style>
        <!--
            /* tutaj znajdzie się kod css */
        -->   
        </style>
       
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            // tutaj znajdzie się nasz kod jQuery
        </script>
    </head>
    <body>
        <!-- div w który będzie naszą chmurką -->
        <div id="cloud"></div>
       
        <img src="http://webinside.pl/img/logo.jpg" alt="logo webinside.pl" />
        <br />
        <a href="http://www.webinside.pl/" title="wortal dla webmasterów">webinside.pl</a>
    </body>
</html>

Ten prosty dokument HTML wyświetli dwa istotne dla nas elementy - obrazek oraz link, oba zostały wyposażone w atrybuty opisujące.

Blok div o identyfikatorze "cloud" będzie natomiast, jak można się domyślić, naszą chmurką - z tym, że póki co tylko pustym kontenerem.

Naszym zadaniem będzie teraz zaprogramowanie jQuery w ten sposób, aby artybuty alt i title były wyświetlane dynamicznie, po najechaniu kursoerm na dany element.

Nim jednak przejdziemy dalej, upewnij się, że do katalogu zawierającego plik z powyższym kodem, zawiera również plik javaScript z biblioteką. Jeśli nie, możesz go pobrać z tej strony.

 

jQuery - krok pierwszy

Zanim stworzymy nasz efekt końcowy, proponuję najpierw, stworzyć poniższy "prototyp", który pozwoli nam zrozumieć zasadę działania jQuery:

<script type="text/javascript">
    $(function(){
       
        //obsługa zdarzenia dla obrazków
        $('img').mousemove(function(){
            var alt = $('img').attr('alt');
            $('#cloud').text(alt);
        });
           
        //obsługa zdarzenia dla hiperłączy
        $('a').mousemove(function(){
            var title = $('a').attr('title');
            $('#cloud').text(title);
        });
       
    });
</script>

 

Oba zdarzenia działają analogicznie. W momencie wykrycia przez js ruchu kursora nad obiektem, uruchamiana jest funkcja, która w pierwszej kolejności pobiera wartość atrybutów (odpowiedzialna jest za to metoda "attr()").

Drugi etap działania funkcji obsługującej zdarzenie jest przepisanie właśnie zdobytej wartości, do naszego bloku div (o identyfikatorze "cloud").

Z resztą - sam sprawdź!

jQuey - krok drugi

Mankamentem powyższego rozwiązania, jest fakt, że nasz prototyp chmurki po pojawieniu się już nie znika. Poprawmy to!

<script type="text/javascript">
    $(function(){
       
        // obsługa najechania kursorem na obrazek
        $('img').mousemove(function(){
            var alt = $('img').attr('alt');
            $('#cloud').text(alt);
            $('#cloud').show();
        });
       
        // obsługa zjazdu kursorem z obrazku
        $('img').mouseout(function(){
            $('#cloud').hide();
        })
       
        // obsługa najechania kursorem na link
        $('a').mousemove(function(){
            var title = $('a').attr('title');
            $('#cloud').text(title);
            $('#cloud').show();
        });
       
        // obsługa zjazdu kursorem z linku
        $('a').mouseout(function(){
            $('#cloud').hide();
        })
       
    });
</script>

Powyższe poprawki usprawniły działanie kodu. Teraz nasz prototyp chmurki pojawia się i chowa - w zależności od pozycji kursora. Od strony jQuery to jednak nadal nie wszystko..

jQuery + CSS - krok trzeci

Jesteśmy już na finiszu. Dodamy teraz do naszego kodu, dosłownie kilka linijek, które będą odpowiedzialne za informowanie "chmurki" o pozycji. Ostateczny kod jQuery wygląda tak:

<script type="text/javascript">
    $(function(){
   
        // obsługa ruchu kursora na obrazku
        $('img').mousemove(function(e){
            var alt = $('img').attr('alt');
            $('#cloud').text(alt);
            $('#cloud').show();
            $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5});
        });
       
        // obsługa zjazdu kursorem z obrazku
        $('img').mouseout(function(){
            $('#cloud').hide();
        })
       
        // obsługa ruchu kursora na linku
        $('a').mousemove(function(e){
            var title = $('a').attr('title');
            $('#cloud').text(title);
            $('#cloud').show();
            $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5});
        });

        // obsługa zjazdu kursorem z linku
        $('a').mouseout(function(){
            $('#cloud').hide();
        })
       
    });

</script>

Powyżej dokonałem dwóch analogicznych zmian. Po pierwsze dodałem obiekt 'e' dla obsługi myszki (może brzmi to jakoś zawile, ale zaraz wszystko się rozjaśni). Druga poprawka to kod:

$('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5}); 

Metoda 'css({});' to jak można się domyśleć modyfikator stylu elementu. Dzięki zadeklarowanemu wcześniej obiektowi 'e' możemy odwołać się teraz do wartości 'pageY' i 'pageX', które kolejno oznaczają: odległość od marginesu górnego oraz odległość od marginesu lewego.

Ten fragment odświeżany będzie za każdym razem, kiedy pozycja kursora (na wskazanym elementem) będzie się zmieniać.

W połączeniu z poniższym fragmentem CSS, "chmurka" będzie podążać za kursorem.

<style>
    #cloud {
        position: fixed;
        background: silver;
        height: 20px;
        width: 200px;
        text-align: center;
        color: white;
        opacity: 0.9;
        display: none;
    }
</style>

Najistotniejsze jest aby nadać width (szerokość), height (wysokość), 'position: fixed' (dzięki czemu "chmurka" będzie mogła mieć odpowiednią odległość od obu marginesów) oraz 'display: none' (dzięki, któremu na początku strony "chmurka" jest niewidoczna). Reszta elementów to kosmetyka.

Całość prezentuje się tak:

<html>
    <head>
        <title>jQuery - chmurki</title>
        <style>
        #cloud {
            position: fixed;
            background: silver;
            height: 20px;
            width: 200px;
            text-align: center;
            color: white;
            opacity: 0.9;
            display: none;
        }
        </style>
       
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $(function(){
   
        // obsługa ruchu kursora na obrazku
        $('img').mousemove(function(e){
            var alt = $('img').attr('alt');
            $('#cloud').text(alt);
            $('#cloud').show();
            $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5});
        });
       
        // obsługa zjazdu kursorem z obrazku
        $('img').mouseout(function(){
            $('#cloud').hide();
        })
       
        // obsługa ruchu kursora na linku
        $('a').mousemove(function(e){
            var title = $('a').attr('title');
            $('#cloud').text(title);
            $('#cloud').show();
            $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5});
        });

        // obsługa zjazdu kursorem z linku
        $('a').mouseout(function(){
            $('#cloud').hide();
        })
       
        });
        </script>
    </head>
    <body>
        <div id="cloud"></div>
        <img src="http://webinside.pl/img/logo.jpg" alt="logo webinside.pl" />
        <br />
        <a href="http://www.webinside.pl/" title="wortal dla webmasterów">webinside.pl</a>
    </body>
</html>

W istocie - więcej jest tutaj pisania niż rozumienia - jeśli na spokojnie przeanalizujesz kod to nie będziesz miał problemów ze zrozumieniem.

Zachęcam do eksperymentowania z jQuery, nie zapominając o wielkim dobrodziejstwie jakim jest dokumentacja - docs.jquery.com.

Ocena 2.8/5 (55.97%) (556 głosów)

Komentarze:


  • Dodał: Gość data: 2009-11-20
    zaskakująco dobre treści w nowym dziale

  • Dodał: Gość data: 2009-11-25
    Trochę lipa, dlatego że oryginalny "ALT" też jest widoczny i chmurki się nakładają.

  • Dodał: Bartek Bilicki data: 2009-11-25
    hmm.. no fakt, ale zawsze można użyć innego atrybutu - np "rel" :)
  • Świetnie
    Dodał: yotepa data: 2009-12-09
    Świetna rzecz, zwłaszcza dla zielonych, ale rozwijających się!; o ukryciu title i alt już przeczytałem w poprzedzającym poście, ale tak w ogóle gdyby ktoś zechciał opisać jak wykonać przypisy w tekście... serdecznie pozdrawiam

  • Dodał: yotepa data: 2009-12-09
    ... oczywiście takie w chmurkach, po najechaniu kursorem na wybrany fragment tekstu...

  • Dodał: Gość data: 2009-12-17
    Szkoda, że jeszcze nie ma dema jak to wyglada.
    Ale jest całkiem nieźle.
  • problem z pozycją
    Dodał: Gość data: 2010-01-19
    Kod: $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5}); nieładnie w złym miejscu wyświetla chmurki na dluższej niż jeden ekran - lub też przy zminejszonym oknie oraz poprzewinięciu strony... Czy ktoś poradzi jak wyznaczyć pozycję dla chmurki działającą w każdym przypadku?

  • Dodał: Gość data: 2010-01-20
    chcemy więcej!
  • wiele obrazków
    Dodał: Gość data: 2010-01-26
    Jak jest wiele obrazków, to wyświetla się ta sama zawartość alta we wszystkich.
  • Wiele chmurek
    Dodał: Panisher data: 2010-04-13
    Mała korekta, aby użyć kilka chmurek na jednej stronie:
    var alt = $('img').attr('alt');
    na
    var alt = $(this).attr('alt');

    www.panisher.pl :)
  • ie
    Dodał: Gość1204 data: 2010-06-23
    nie dziala to w przegladarce internet explorer
  • Niestety
    Dodał: zawiedziony data: 2010-08-25
    Temat super, fajny skrypt, ale co z tego jak we wszystkich chmurkach pojawia się treść pierwszego elementu danego typu.
    Metoda którą podał Panisher działa na obrazki ale nie na linki.
    Jak wymyślę coś prostego to zamieszczę.
    Puki co to skrypt bezużyteczny niestety:/
  • A jednak :)
    Dodał: zawiedzony data: 2010-08-25
    Sorki mój błąd. Sposób Panischera działa trzeba tylko pilnować nazw zmiennych :P

    Czyli świetny skrypt jednak :)
  • chmurki pod obrazkiem
    Dodał: Bart data: 2010-09-08
    powiecie mi dlaczego moje chmurki są "pod" obrazkami? tak jakby obrazki mialy ustawione 'zawsze na wierzchu'.
    pomożecie?
  • chmurki pod obrazkiem
    Dodał: Bart data: 2010-09-08
    rozwiązałem problem, wystarczyło diva przenieść na stronie, pod obrazy:
    <img cos tam/>
    <div id="cluod"></div>
  • pozycja chmurki
    Dodał: szarlej data: 2010-12-15
    Aby pozycja chmurki była zawsze poprawna należy wiersz

    $('#cloud').css({'top': e.pageY + 5, left: e.pageX + 5});

    zmienić na

    $('#cloud').css({'top': e.pageY + 5 - ('html').scrollTop(), left: e.pageX + 5});

    Po prostu dodałem do obliczenia wartości TOP ilość pixeli, o jakie strona została już zescrollowana (analogicznie naprawiamy skrypt dla scrolu bocznego)

    pozdro,
    przem
  • ojej jutro wigilia
    Dodał: kasia data: 2010-12-23
    hohol wesolych swiat ;)

  • Dodał: Gość data: 2011-11-14
    beznadziejne
  • super
    Dodał: Takashi data: 2012-02-10
    hej ty dup*kowaty "gościu". żadne beznadziejne tylko dobre. dobre realizacja, prosty przejrzysty kod i akrualizacje w komentarzach (choć wg. mnie powinny być też naniesione w głównym kodzie). więc jeśli piszesz beznadziejne to chociaż uzasadnij!
  • drobna poprawka
    Dodał: Takashi data: 2012-02-10
    sory za post pod postem, ale miałem problemy pod FF i to jest poprawnie działający środek kodu:

    var alt = $(this).attr('alt');
    var scroll = $('html').scrollTop();
    $('#cloud').html(alt);
    $('#cloud').show('normal');
    $('#cloud').css({'top': e.pageY + 5 - scroll, left: e.pageX + 5});

    zmieniłem przypisanie scrolla do zmiennej bo sypało błędem.
    Pozdro
  • Nie dizala IE
    Dodał: Rafal data: 2012-08-13
    Źle działa niestety pod IE :O(


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.