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.

Link 1

Link 2

Link 3

Link 4

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">

/***********************************************
* Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</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

 

Projekt © 2009 - INFOPROG 67920 odwiedzin