Logo


Zapraszam pod nowy adres, pod którym mam nadzieję zmiany będą częściej http://devel.jdstar.pl.

Podpowiedzi na www valid XHTML - czyli dymki, tooltip'y lub inne nazwy (nie wiem jakie)

2007-05-15 JDStar


Ostatnie artykuły

Próbnik koloru (color picker?) - pomoc w wyborze schematu kolorystycznego strony komentarzy [2]
Konwersja z HTML do PDF w PHP - dompdf komentarzy [4]
Generowanie dokumentów PDF z HTML w PHP (dompdf, HTML2FPDF, TCPDF) komentarzy [53]
Podpowiedzi na www valid XHTML - czyli dymki, tooltip'y lub inne nazwy (nie wiem jakie) komentarzy [44]
Rozszerzenia Firefox'a, których używam - przydatne dla webdeveloperów/webmasterów komentarzy [53]

Jakiś czas temu kolega spytał, czy byłbym w stanie zrobić podpowiedzi do określonych obszarów obrazka, ale te podpowiedzi muszą również zawierać obrazek. W skrócie chodziło mu o opisanie fragmentu mapy (trasy rowerowej) z zaznaczonymi ciekawymi miejscami do zwiedzanie - miało być zdjęcia plus krótki opis a kliknięcie przenosi do pełnego opisu atrakcji (całe rozwiązanie miało być jak najlżejsze) - jego współpracownik stwierdził, że takiego czegoś się nie da zrobić.

Trochę poszukałem w necie, trochę poczytałem i efektem jest kod poniżej, w większości zaczerpnięty z www.dynamicdrive.com ale trochę odchudzony i działający w Operze (oryginał coś mi nie chciał działać).

Kody źródłowe do uruchomienia tooltip'ów

Zależnie od przyzwyczajenie i metod programowania można umieścić wszystkie kody w jednym pliku lub w osobnych. Ja preferuję to drugie rozwiązanie. Poniżej kody, jeśli są niejasności proszę pytać mail'em lub zadać pytanie w komentarzach.

Arkusz stylów CSS 

#xhtmltooltip
 {
 position: absolute;
 width: 200px;
 max-width: 500px !important;
 border: 2px solid black;
 padding: 2px;
 background-color: yellow;
 visibility: hidden;
 z-index: 100;
 }
 #imgmap { position: relative; }
 #imgmap li
 {
 position: absolute;
 display: block;
 list-style: none;
 border: 2px blue dotted;
 overflow: hidden;
 }
 #imgmap li a
 {
 display: block;
 width: 100%;
 height: 100%;
 background: url(space.gif);
 }
 #area1
 {
 left: 30px;
 top: 30px;
 width: 50px;
 height: 30px;
 }
 #area2
 {
 left: 150px;
 top: 60px;
 width: 60px;
 height: 20px;
 }
 #area3
 {
 border: 0px solid white;
 left: 300px;
 top: 250px;
 width: 30px;
 height: 70px;
 }
 #area4
 {
 left: 400px;
 top: 25px;
 width: 150px;
 height: 100px;
 }

Kod JavaScript 

/*
 Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
 Copyright 2002 by Sharon Paine
 Visit http://www.dynamicdrive.com for this script
 Adapted Jacek Dziura http://www.jdstar.pl */
 var offsetxpoint=-60 //Customize x offset of tooltip
 var offsetypoint=20 //Customize y offset of tooltip
 var ie=document.all
 var ns6=document.getElementById && !document.all
 var enabletip=false

 if (ie||ns6)
 var tipobj=document.all? document.all["xhtmltooltip"] : document.getElementById? document.getElementById("xhtmltooltip") : ""
 function ietruebody(){
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }
 function ddrivetip(thetext, thecolor, thewidth){
 if (ns6||ie){
 if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
 if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.background
 tipobj.innerHTML=thetext
 enabletip=true
 return false
 }
 }
 function positiontip(e){
 if (enabletip){
 var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
 var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
 //Find out how close the mouse is to the corner of the window
 var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
 var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
  //if the horizontal distance isn't enough to accomodate the width of the context menu
 if (rightedge
 //move the horizontal position of the menu to the left by it's width
 tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
 else if (curX
 tipobj.style.left="5px"
 else
 //position the horizontal position of the menu where the mouse is positioned
 tipobj.style.left=curX+offsetxpoint+"px"
 //same concept with the vertical position
 if (bottomedge
 tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
 else
 tipobj.style.top=curY+offsetypoint+"px"
 tipobj.style.visibility="visible"
 }
 }
 function hideddrivetip(){
 if (ns6||ie){
 enabletip=false
 tipobj.style.visibility="hidden"
 tipobj.style.left="-1000px"
 tipobj.style.background
 tipobj.style.width=''
 }
 }
 document.onmousemove=positiontip

Kod XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-type" content="application/xhtml+xml;charset=utf-8" />
<title>XHTML+JS Tooltip by JDStar</title>
<style type="text/css" media="all">  @import url("xhtmltooltip.css");</style>
</head>
<body><div id="xhtmltooltip">
</div>
<script type="text/javascript" src="xhtmltooltip.js"></script>
<h2>Podpowiedzi w dymkach z obrazkami JDStar</h2>
<div id="imgmap">    
<img src="obrazek.jpg" alt="" />
<ol>        
<li id="area1"><a href="#" onmouseover="ddrivetip(''<img alt=\\''tipp\\'' src=\\''tip1.jpg\\''/>
<br/>Opis do pierwszego tipa'',''red'',200)" onmouseout="hideddrivetip()">
</a>
</li>        
<li id="area2" style="border:1px solid white;"><a href="#" onmouseover="ddrivetip(''<img alt=\\''tipp\\'' src=\\''tip2.jpg\\''/> 
<br/>Opis do drugiego tipa'')" onmouseout="hideddrivetip()">
</a>
</li>        
<li id="area3"><a href="#" onmouseover="ddrivetip(''<br/>Opis do trzeciego tipa<br/><strong>Można pogrubić,<em> pochylić</em> i stosować pozostałe tagi</strong>'',''green'',300)"onmouseout="hideddrivetip()">
</a>
</li>        
<li id="area4"><a href="#" onmouseover="ddrivetip(''<img alt=\\''tipp\\'' src=\\''tip4.jpg\\''/><br/>A tu opis do czwartego tipa'')" onmouseout="hideddrivetip()"></a>
</li>    
</ol></div></body>
</html>

Wszystkie pliki spakowane 7-zip''em można pobrać tutaj.

A teraz działający przykład podpowiedzi tooltip.

dodaj komentarz

1: 2007-06-01 07:32:14, gośc:
Super tego mi trzeba było porządny kod:)

2: 2007-08-24 12:12:41, nie podano:
nie podano

3: 2007-11-09 17:52:00, jh:
nie podano

4: 2007-11-14 19:36:34, tomaxcr:
mam pytanie pewnie dośc banalne, w pliku css sa współrzędne "area" i chciałem je zmienić na dostosowane do mojego rysunku. problem polega na tym że keidy je ustawie w edytorze to potem w przeglądarce IE są gdzie indziej niz w edytorze jak to naprawić??

5: 2007-11-16 20:00:17, JacekDziura:
W CSS są po prostu wpisane pozycje i wymiary DIV'a - więc musisz coś robić źle, może jednostki zmieniłeś lub usunąłeś
Prześlij mi kod mailem to zobaczę.

6: 2008-10-07 16:32:27, Supi:
A jak można zrobić by obrazki prezentowane w dymkach (z przezroczystym tłem będące zapisane w formacie png) pozbawić "wstrętnego" tła w IE. Rzecz jasna Firefox i Opera działa bez zarzutu.

7: 2008-10-10 21:32:11, JacekDziura:
Postaram się dzisiaj lub na weekend zrobić demo przezroczystości dla IE w dymkach

8: 2008-10-13 22:42:41, Supi:
Wspaniale, czekam na kod :))

9: 2008-10-28 18:54:53, Supi:
I jak? Udało się coś wykombinować?

10: 2010-03-07 13:01:11, AdamsObbl:
dzięki bardzo, takich jak ty trzeba więcej, wszystko czysto i przejrzyście. polecam!

11: 2010-12-23 23:23:19, nie podano:
oooo

12: 2017-02-20 21:10:34, nie podano:
cóżem się naszukał..ale w końcu TRAFIŁEM na ten super! kod

13: 2017-09-15 17:10:43, ronaSins:
Voici cela oui!
<a href="http://www.whorebutt.top/">Free Porn Picture Galleries</a>

14: 2018-03-27 11:45:22, MelissaBob:
<a href=https://alitems.com/g/1e8d1144947cf271b95a16525dc3e8/>Aliexpress</a> - your star sales...

15: 2019-10-15 11:41:34, RogelioErera:
Swietny transfer w dowolne miejsce na swiecie
Od wielu lat korzystamy z uslug Kiwitaxi, aby zamowic przelew. Jest to firma posredniczaca, ktora odbierze dla Ciebie przelew w dowolnym zakatku swiata. Podrozowalismy do kilku roznych krajow i zawsze kiwitaxi zapewnial nam doskonaly transfer w najnizszych cenach, jakie moglem znalezc i znacznie nizszy niz taksowka po przybyciu na lotnisko.
http://www.vk.com/wall-176529033_715

16: 2019-10-15 21:50:02, devpost.com:
Hey There. I found your blog using msn. This is an extremely well written article.
I'll make sure to bookmark it and come back to read more of your useful
information. Thanks for the post. I will certainly comeback.

17: 2019-10-15 21:52:02, devpost.com:
Hey There. I found your blog using msn. This is an extremely well written article.
I'll make sure to bookmark it and come back to read more of your useful
information. Thanks for the post. I will certainly comeback.

18: 2022-05-31 17:57:14, SusanGAL:
<a href=https://cialistbl.com/>cialis best price</a>
<a href="https://cialistbl.com/">buy cialis</a>

19: 2023-04-08 02:04:34, Michaeljoync:
第一借錢網擁有全台最多的借錢資訊


https://168cash.com.tw/

20: 2023-05-29 00:05:01, MariaCrelp:
סקס

<a href=https://webtrh.cz/members/255011-sydneechambers>https://webtrh.cz/members/255011-sydneechambers</a>

21: 2023-09-04 18:35:19, Cytotec:
buy misoprostol over the counter: <a href=" https://cytotec.auction/# ">cytotec abortion pill</a> buy cytotec
buy cytotec online fast delivery https://cytotec.auction/# - buy cytotec over the counter

22: 2023-09-08 09:54:57, spam Website:
I really like your blog.. very nice colors & theme.
Did you make this website yourself or did you hire someone
to do it for you? Plz reply as I'm looking to create my own blog and would like to know
where u got this from. appreciate it

23: 2023-09-08 12:18:50, Plastikovy_muMl:
Защита вашего дома с помощью пластиковых окон

24: 2023-09-08 12:18:55, Plastikovy_bokl:
Внедрение пластиковых окон по правильным нормам

25: 2023-09-08 12:20:57, Plastikovy_lbEa:
Пластиковые окна для дома – идеальный выбор

26: 2023-11-19 13:55:32, WilliamSnuct:
nie podano

27: 2024-02-10 03:24:06, Vaughnpleno:
Эскорт сопровождение - это услуга, которая предоставляется женщинами и мужчинами,которые сопровождаЭскорт сопровождение - это услуга, которая предоставляется для обеспечения безопасности и комфорта клиентов
во время их пребывания в незнакомом городе или стране. Эскорт сопровождающий обычно является опытным профессионалом, который знает все тонкости и особенности местной культуры и может помочь клиенту чувствовать себя уверенно и защищенно- <a href=https://my-bar.ru/cocktails/ma_sheri>услуги госпожа.</a>

28: 2024-05-31 13:32:31, Josephreula:
you can try here https://metamask-wallet.at/2023/11/16/mastering-the-art-of-transferring-cryptocurrency-how-to-send-from-coinbase-to-metamask/

29: 2024-05-31 15:14:05, ztalethvxg:
ivermectin for copd ivermectin colon cancer <a href="https://nwvipphysicians.com/">how much is ivermectin without insurance</a> order stromectol online without prescription is stromectol available in canada

30: 2024-05-31 16:21:43, RichardLiess:
Full Article <a href=https://jaxxwallet.org/>jaxx libery</a>

31: 2024-05-31 19:48:03, Clamcaseizf:
nie podano

32: 2024-07-12 21:31:09, diablogamearcom:
<a href=https://griezmann-antoine-fr.biz>griezmann antoine</a>

play in diablo game here
<a href=https://griezmann-antoine-fr.biz>griezmann-antoine-fr.biz</a>

33: 2024-09-05 10:10:24, OrlandoDrurl:
omg сайт – это ресурс для people ищет конфиденциальность в своих онлайн-активностях. omgomgomg offers ассортимент ресурсов, которые you won’t find в traditional online stores.
<a href=https://omgomg.help/>ссылка на омг</a>

34: 2024-09-05 18:52:37, Stephendreni:
her comment is here <a href=https://galaxyswapper.ru>galaxy swapper download</a>

35: 2024-09-05 18:53:06, http://ar.savefrom.net/9-how-to-download-facebook-video.html/:
بمجرد إنشاء الكتالوج الخاص بك وأنت
على استعداد لعمل إعلان منتج ديناميكي ، ارجع إلى مدير الإعلانات وقم
بإنشاء حملة جديدة باستخدام "مبيعات كتالوج المنتجات" كهدف.

36: 2024-09-05 18:54:11, http://ar.savefrom.net/9-how-to-download-facebook-video.html/:
بمجرد إنشاء الكتالوج الخاص بك وأنت
على استعداد لعمل إعلان منتج ديناميكي ، ارجع إلى مدير الإعلانات وقم
بإنشاء حملة جديدة باستخدام "مبيعات كتالوج المنتجات" كهدف.

37: 2024-09-05 18:55:16, http://ar.savefrom.net/9-how-to-download-facebook-video.html/:
بمجرد إنشاء الكتالوج الخاص بك وأنت
على استعداد لعمل إعلان منتج ديناميكي ، ارجع إلى مدير الإعلانات وقم
بإنشاء حملة جديدة باستخدام "مبيعات كتالوج المنتجات" كهدف.

38: 2024-09-05 18:56:21, http://ar.savefrom.net/9-how-to-download-facebook-video.html/:
بمجرد إنشاء الكتالوج الخاص بك وأنت
على استعداد لعمل إعلان منتج ديناميكي ، ارجع إلى مدير الإعلانات وقم
بإنشاء حملة جديدة باستخدام "مبيعات كتالوج المنتجات" كهدف.

39: 2024-09-05 22:05:00, Garminzmxv:
At the same time, many antique

40: 2024-09-05 22:11:13, Philiplam:
Устали от работы и хотите отдохнуть? Отвлекитесь и посмотрите прикольные картинки на сайте <a href="https://kartinkianekdoty.wordpress.com/2024/08/19/%d1%87%d1%82%d0%be-%d1%82%d0%b0%d0%ba%d0%be%d0%b5-%d0%bc%d0%b5%d0%bc%d1%8b-%d0%b8-%d0%ba%d0%b0%d0%ba-%d0%be%d0%bd%d0%b8-%d0%bf%d0%be%d1%8f%d0%b2%d0%b8%d0%bb%d0%b8%d1%81%d1%8c/">kartinkianekdoty.wordpress.com</a>

41: 2024-09-06 04:01:26, Jerrellabica:
<a href="https://primer.com"><img alt="" src="https://org-l.de/1.png" /></a>

42: 2024-10-02 14:18:00, Robertnog:
interesting for a very long time
_________________
<a href="https://mao.betsportbonus.homes">автоматы слоты играть онлайн бесплатно вулкан</a>

43: 2024-11-13 04:00:49, Bernardkeync:
https://usa.alt.com/Sex-Dating/United-States/Texas/Kurten - free online Dating in Texas Kurten

44: 2024-11-21 01:51:00, <a href=https://spb-generic.ru/tadalafil/djenerik-sialis-40-mg>Дженерик сиалис 40мг</a>:
Купить дженерик сиалис 40мг в Санкт-Петербурге https://spb-generic.ru/tadalafil/djenerik-sialis-40-mg быстрая доставка
высокое качество дженериков производства индии в наличии