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 [3]
Generowanie dokumentów PDF z HTML w PHP (dompdf, HTML2FPDF, TCPDF) komentarzy [37]
Podpowiedzi na www valid XHTML - czyli dymki, tooltip'y lub inne nazwy (nie wiem jakie) komentarzy [17]
Rozszerzenia Firefox'a, których używam - przydatne dla webdeveloperów/webmasterów komentarzy [7]

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.