Przejdź do Taraki mobilnej! - masz wąski ekran.
zdjęcie Autora

10 czerwca 2013

Wojciech Jóźwiak

z cyklu: Auto-promo Taraki 3 (odcinków: 144)

Dymki z linkami, jak je zrobić?

Kategoria: Projekt Taraka

« Wartość wielkich i małych narodów Wojna o duszę Europy »

Co to są te „dymki z linkami”? Kiedy najeżdżasz myszą na coś, co ma atrybut title=”treść dymku”, pod myszą (przy kursorze myszy) wyświetla się dymek z tą treścią:

Powyższy dymek jest systemowy, tzn. wyświetla go przeglądarka bez żadnego dodatkowego skryptu.

W Wikipedii (w innych witrynach też) dymek jest nie-systemowy, jest bardziej rozbudowany, a przede wszystkim ma to, na czym najbardziej mi zależy: zawiera linki, można do niego wjechać myszą, w ten link kliknąć i go otworzyć/uruchomić.

To jest ta cudowna właściwość, którą chcę mieć w Tarace. (A nie mam.)

Najlepiej byłoby, gdyby taką funkcjonalność dało się zrobić przy pomocy czystego CSS, czyli przez nadanie dymkowi odpowiedniej klasy. Jeśli nie można, to przy pomocy jQuery.


Jeśli wiesz, jak to zrobić, to napisz, proszę, albo podaj link do strony gdzie to jest opisane.

(Ps. Wikipedia realizuje to jakoś inaczej, nie przez CSS ani przez jQuery, ale nie mam zamiaru uczyć się jej skrajnie zawiłego systemu.)

Auto-promo Taraki 3: wstęp na końcu

Starsze teksty z tego cyklu w blogach Auto-promo 2 i Auto-promo.



« Wartość wielkich i małych narodów Wojna o duszę Europy »

komentarze

[foto]

1. Proszę o linka • autor: Jan Szeliga2013-06-10 16:37:56

Wojtku, czy możesz podać linka do konkretnej strony gdzie coś takiego występuje?
[foto]

2. Podałem. • autor: Wojciech Jóźwiak2013-06-10 16:58:25

Dymki systemowe występują prawie wszędzie, przykład jest z Taraki.
Dymki linkowalne (tak je nazwę) są w Wikipedii. (i nie tylko tam, jak znajdę dobry przykład, to napiszę.) Dymkiem linkowalnym jest też to, co się wyświetla przy "tarakowym słoneczku" w lewym górnym rogu.
Więc częściowo potrafię to zrobić, ale nie w każdym kontekście.
Dlatego pytam, żeby Ktoś Kto Wie, mi podpowiedział.
[foto]

3. Tooltip • autor: Piotr Jaczewski2013-06-16 19:57:20

Nikt nie odpowiedział i nie podpowiedział(tooltip), to musiałem przegrzebać pamięć:
http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

http://api.jqueryui.com/tooltip/

[foto]

4. Tooltip! • autor: Wojciech Jóźwiak2013-06-17 08:34:50

Dzięki, Piotrze,
przynajmniej wiem, jak się to ustrojstwo nazywa: TOOLTIP. (Nigdy bym nie zgadł :) --- Teraz mogę poszukać w Googlach.
Przykład z Webdesignerdepot jest bardzo pouczający - ale nie pozwala umieścić linku wewnątrz dymka. Pouczający także przez to, że przybyło komend CSS, których ja nie znam i muszę się douczyć. Jak np. "content: attr(title);".

Dziwi mnie tylko (tak jak i Ciebie), że owszem, OK, ma Taraka dwóch genialnych znających się na wszystkim autorów, tzn. Ciebie i mnie, ale przecież są, jak myślę, Czytelnicy, którzy wiedzę o tooltipach i innych widżetach mają w małym palcu --- więc dlaczego milczą i nie chcą się nią podzielić?
Czyżby działała zawodowa zazdrość? "Nie dopuścimy laika Jóźwiaka do naszych tajemnic"?
Czy raczej działa POLSKI brak społecznych odruchów? "Olewam społeczność, siedzę w swoim kącie".

Dzięki raz jeszcze :)

5. Wojciechu, nie idź tą drogą • autor: Krabat2013-06-17 10:23:15

Tooltips to ZŁO! Nie ma nic bardziej wkurzającego, niż wyskakujące znienacka obrazki i dymki.
Czytam sobie stronę, przewijam - a tu nagle pod kursorem wyskakuje coś, o co nie prosiłem. Czasem nawet otwiera się nowe okno albo zakładka.
Chyba że... istnieje jakiś parametr, który określa po jakim czasie trzymania kursora nad obiektem tooltip wyskoczy.

Pozdrawiam,
J.K

[foto]

6. Właśnie że będę! • autor: Wojciech Jóźwiak2013-06-17 11:05:17

Drogi Krabacie, tultipy chcę zainstalować przy ogłoszeniach w prawej kolumnie. Żeby jak sie najedzie myszą na to małe ogłoszenie, to ono powiększy się pod myszą - jako tultip właśnie - do większego ogłoszenia, takiego ze zdjęciem, datą-miejscem i linkami.

Tultipy traktuję jako naturalne poszerzenie rozwijanego menu. Zobacz menu na górze Taraki. Zobacz menu po najechaniu myszą na "słoneczko" w lewym górnym rogu - przecież to jest własnie tultip, taki jak chce mieć przy ogłoszeniach.

Pozdrawiam - ~WJ
[foto]

7. Czy tak jak tu? • autor: Jan Szeliga2013-06-17 11:34:05

Wojtku, czy to ma tak wyglądać jak np na tej stronie?
http://pl.wikipedia.org/wiki/Inuit

Gdy najeżdżamy myszą na liczby 1-15 pojawiają się dymki. Niektóre zawierają jeden lub 2 linki które można klikać.
Jeśli to jest to, to jak znajdę chwilkę to się temu przyglądnę.

P.S. nie wiem dlaczego nie mogę wstawić linka?
[foto]

8. Tak, ale • autor: Wojciech Jóźwiak2013-06-17 11:45:32

Ale technologia Wikipedii jest poza Wikipedią bezużyteczna. :)

(Dlaczego link się nie daje wstawić? - Nie wiem. Być może klikasz nie w to miejsce co trzeba. Formularz do wstawiania linków jest dość delikatny.)
[foto]

9. A może tak? • autor: Jan Szeliga2013-06-20 15:43:17

Znalazłem bardzo prosty sposób. Można o tym poczytać tu: 

Zrobiłem też mały przykład wykorzystujący ten opis na mojej stronie.

Działa po najechaniu myszą na : "
szałas potu (ang. Sweat Lodge)"
i na 
"Twardej Ścieżki"

Myślę że gdyby pogrzebał coś w parametrach wyświetlania to można by było zmieniać miejsce, kształt i wielkość wyskakujących dymków.

Zaloguj się - aby napisać komentarz   Rejestracja - jeśli nie masz konta w Tarace

x

Szybki przegląd Taraki

[X] Logowanie:

- e-mail jako login
- hasło
Zaloguj
Pomiń   Zapomniałem/am hasła!

Zapisz się (załóż konto w Tarace)