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 [13]
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>