JDStar: Webmaster, Linux admin, XHTML, PHP, JAVA....
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 [52]
Podpowiedzi na www valid XHTML - czyli dymki, tooltip'y lub inne nazwy (nie wiem jakie) komentarzy [42]
Rozszerzenia Firefox'a, których używam - przydatne dla webdeveloperów/webmasterów komentarzy [49]
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.
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>