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

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>