Artykuły:

Reklama na blogach - Blogvertising.pl
  • data publikacji: 03.06.2008

    Pojawiająca się podpowiedź

    kategoria: Skrypty client-side, XHTML/CSS autor: palmiak

    Pojawiająca się podpowiedź

    Zdarza się czasem, że chcieli byśmy pomóc userowi, doradzając co powinien zrobić. Możemy do tego użyć wielu subtelnych metod lub centralnie na środku obrazka wyświetlić mu napis "POWIĘKSZ", "PRZECZYTAJ TO" etc. W tym tutorialu pokażę właśnie tą mało subtelną wersję.

    Obrazek

    Nim weźmiemy się do pracy najpierw musimy przygotować sobie obrazek z odpowiednim napisem. Ja użyłem gifa z napisem "POWIĘKSZ". Dlatego gifa, że nie potrzebowałem półprzezroczystości oraz nie trzeba się męczyć z ie6. Oczywiście nic nie stoi na przeszkodzie, żeby zamiast obrazka użyć tekstu, jpga, pnga czy czego tam sobie życzymy.

    My użyjemy:

    powiększ

    xhtml

    Sam link z obrazkiem wyglądać będzie następująco:

    <a href="nazwa_obrazka.jpg" class="zoom"><img src="nazwa_miniaturki.jpg" alt="opis miniaturki" /></a>
     

    Nic więcej nie potrzebujemy, bo resztą zajmie się jQuery.

    css

    Nasz styl też nie będzie zbyt imponujący:

    a.zoom {
            position:relative;
            display:block;
            width:0;
    }

    .zoombutton {
            background:url(zoom.gif) no-repeat;
            width:150px;
            height:50px;
            position:absolute;
            }

    a.zoom musi mieć position:relative żeby div z position:absolute, znajdujący się w środku wiedział wobec czego ma się odnosić.

    Width:0 musi być, żeby link nie zajmował całej szerokości ekranu. Mimo, że 0 jest wartością mniejszą niż szerokość obrazka (dość oczywiste, czyż nie?) to a automatycznie się dopasuje. Szczerze mówiąc jest to dla mnie drobną zagadką dlaczego tak jest, ale ważne, ze działa.

    jQuery

    jQuery będzie miało do zrobienia kilka rzeczy

    • dodać diva w którym będzie wyświetlany tekst/obrazek
    • umieszczać tego diva na samym środku obrazka
    • pokazywać i ukrywać diva w zależności od tego czy najechaliśmy na linka

    W całości wygląda to tak:

    $(document).ready(function(){
           
        $("a.zoom").prepend("<div class=\"zoombutton\"></div>");
           
            $("a.zoom").children(".zoombutton").hide();
           
            $("a.zoom").hover(
          function () {    
                    $(this).children(".zoombutton").fadeIn("slow");
          },
          function () {
                    $(this).children(".zoombutton").fadeOut("slow");
          }
        );
      });

    function center() {
            $(".zoom img").each(function(){
                            var wys;
                            var szer;
                   
                            wys = $(this).height();
                            wys = (wys / 2) - 25;
                   
                            szer = $(this).width();
                            szer = (szer / 2) - 75;
                   
                            $(this).parent().children(".zoombutton").css({ top:wys, left:szer });
           
                    });
    }

    $("a.zoom").prepend("<div class=\"zoombutton\"></div>"); odpowiada za wstawienie diva z obrazkiem "POKAŻ". Zostaje on wstawiony w każdy <a href="" class="zoom">.

    Następnie za pomocą $("a.zoom").children(".zoombutton").hide(); ukrywamy napis.

    Dzięki $("a.zoom").hover( ustawiamy co ma się dziać po najeździe na link. W naszym przypadku ma się pokazać nasz napis.

    Pozostaje nam jeszcze funkcja o nazwie center. Dzięki niej napis "POKAŻ" zostaje dokładnie wycentrowany. Najpierw patrzymy jakie wymiary ma obrazek, a następnie dzielimy przez 2 oraz odejmujemy połowę wysokości lub szerokości diva zoombutton.

    Łączymy to do kupy

    Całość powinna się składać z:

    • index.html - czy innego pliku w którym planujesz umieścić ten skrypt
    • style.css - czyli pliku ze stylem
    • jQuery.js - czyli pliku pobranego z ze strony jQuery.com
    • zoom.js - pliku w którym znajduje się skrypt odpowiadający za nasz bajerek

    Cały komplet możecie pobrać klikając tutaj. Tam też możecie spojrzeć w kod źródłowy.

    Podsumowanie

    I tym oto sposobem uzyskaliście dość przyjemny bajerek, który może pomóc niezorientowanemu userowi.

    Aby zobaczyć jak to działa wejdźcie na pliki.vivee.info/zoom/

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop
  • Podobne wpisy - Vivee blog o webmasteringu, grafice i fotografii

    Zobacz podobne wpisy:

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    13 Responses to “Pojawiająca się podpowiedź”

    1. Burger mówi:
      3 06 2008 o 23:48

      No wreszcie ruszyliście :D
      A tutek świetny, mozliwe że sie przyda :)

      Odpowiedz
    2. agressiva mówi:
      12 06 2008 o 09:42

      No pewnie, że ruszyliśmy :)

      A Maciek zawsze jakiś bajerek wymyśli :)

      Odpowiedz
    3. ernie mówi:
      16 06 2008 o 12:58

      Dobry tutorial i użyteczny

      Pozdro

      Odpowiedz
    4. Burger mówi:
      23 06 2008 o 16:24

      http://burger.pdg.pl/index.php?site=arts&act=czyde

      mój rezultat :)

      Odpowiedz
    5. palmiak mówi:
      23 06 2008 o 20:59

      Burger, a zerknąłeś jak to pod ie6 wygląda?

      Poza tym bardzo fajnie ten cień na brzegach wyszedł.

      Odpowiedz
    6. Gnacio mówi:
      18 07 2008 o 15:14

      Tut fajny :)
      Ale ja chce zrobic aby 3 obrazki w jednej linijce. A one sie robia jeden pod drugim, co wyglada brzydko :P Idzie zrobic aby w jednej lini byly 3 obrazki?

      Odpowiedz
    7. palmiak mówi:
      18 07 2008 o 15:22

      Wystarczy a dodać float:left i prawdopodobnie zadziała.

      Odpowiedz
    8. Gnacio mówi:
      18 07 2008 o 15:51

      No nie pomyslalem o tym :P Myslalem, ze bedzie trzeba zmianiac cos w jquery.js, no, ale naszczescie nie :D
      Dzieki ;)

      Odpowiedz
    9. JaRo mówi:
      25 10 2008 o 14:02

      Genialny tutorial. Dzięki :)

      Odpowiedz
    10. Jurek mówi:
      16 03 2009 o 14:49

      Witam, panowie specjaliści, a dało by się jakość tego diva z obrazkiem upchnąć jako niewidocznego gdzieś w treść body? Chodzi o dynamiczną zmianę adresu docelowego w zależności od zawartości, obrazka. Skrypt miał by pracować w blogu a zawartością headera nie mogę manipulowac…

      Pozdrawiam

      Odpowiedz
    11. JaRo mówi:
      30 06 2009 o 08:10

      A ja mam takiego byka małego tutaj. A więc…

      ‘Pomachajcie’ myszką trochę – wjeżdżając i zjeżdżając na obrazki w szybkim tempie i zobaczcie na to opóźnienie :) Jak temu zaradzić?

      Odpowiedz
    12. palmiak mówi:
      30 06 2009 o 11:59

      Najprościej to zmień slow na fast i już. Wtedy nie będzie opóxnienia.

      Odpowiedz
    13. JaRo mówi:
      30 06 2009 o 12:37

      Nie chodzi mi dokładnie o samo opóźnienie, ale o efekt jaki się tworzy jak machasz myszką – mycha dawno jest poza zdjęciem, a efekt powtarza się jeszcze tylko razy, ile na nie wjechałeś :) Fakt taki skrypt, ale przydałby się jakiś fix na to :-P

      Odpowiedz

    Leave a Reply

Komentarze

Kategorie

Top 10

  • CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
  • Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
  • Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
  • Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
  • Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
  • Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
  • Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
  • Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
  • Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
  • Skrypty client-side
  • Skrypty server-side
  • Tutoriale
  • Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
  • Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
  • Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
  • XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej

Przypominamy o Konkursie Noworocznym

Wraz z nowym, 2010 rokiem ogłosiliśmy konkurs na tutorial o tematyce CMS-owej.
Mamy nadzieję, że jakieś prace zostaną nadesłane do końca terminu i znajdzie się zwycięzca w pierwszym naszym oficjalnym konkursie z nagrodami.
Zachęcamy wszystkich do spróbowania swoich sił.

Szczegóły dostępne są pod tym adresem: http://vivee.info/2010/01/01/konkurs-noworoczny/

Zareklamuj nas :)

Jako, że pojawiła się na vivee.info nowa skóra przygotowałam nasze firmowe banerki reklamowe. Osoby, które wyrażą chęć wsparcia nas reklamą u siebie na blogach lub innych serwisach mogą pobrać je poniżej. Czytaj dalej

Polecane strony

copyright vivee.info      |       all rights reserved      |       design by water design