Obrazek jako toltip
Kolejny sposób wykorzystania grafiki jako opisu lub podpowiedzi. Skrypt może być wykorzystany np. do bardzo dużych rozbudowanych galerii która jest jako lista lub spis podkatalogów, i po najechaniu na kolejny link toltip wyświetli przykładowy jeden obrazek lub małe zdjęcie mówiące o zawartości podfolderu.
Oto kod do sekcji HEAD:
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="/ddimgtooltip.css" /> <script type="text/javascript" src="/ddimgtooltip.js"> /*********************************************** </script> |
W górnej części plik ddimgtooltip.js miejscu można zdefiniować swoje podpowiedzi:
| tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}] tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}] tooltips[2]=["dynamicindex14/winter.jpg"] tooltips[3]=["dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}] |
tak powinna wyglądać składnia definiująca każdy poszczególny toltip:
tooltip[x]=['path_to_image', 'optional desc', optional_CSS_object]
| <p><a href="http://www.dynamicdrive.com" rel="imgtip[0]">Link 1</a></p> <p><a href="http://javascriptkit.com" rel="imgtip[1]" style="float:right">Link 2</a></p> <p><a href="http://cssdrive.com" rel="imgtip[2]">Link 3</a></p> <p><a href="http://codingforums.com" rel="imgtip[3]">Link 4</a></p> |
Pliki do pobrania i umieszczenia w folderze gdzie będzie strona
ddimgtooltip.css
ddimgtooltip.js