View Full Version : Image w/ description tooltip

07-27-2007, 10:00 PM
1) Script Title: Image w/ description tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

3) Describe problem: Is it possible to use the above script binding to images in a database, for instace, an "Imagedata" column in a SQL Server 2005?


07-28-2007, 06:01 PM
Any JavaScript/ DHTML can essentially have its data dynamically generated from a database. It's just a matter of isolating the portions of the script that contains the data, and store it on the server side. In this case, the data is the following:

messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');

So I you'd want to store the image paths and text descriptions in your db, and dynamically output this portion of the JavaScript (the messages[] array), drawing the image path/ messages from the db. Using PHP, you may end up with something like:

echo "messages[0]=new Array('" . imagedata . ", '" . description . ", '" . bgcolor +"')';

08-12-2007, 05:29 PM
Hello ddadmin,

Thanks for the reply.
I could easely change the pictures by changing the image path to the ones in my database.
Now, I would like to display them in a Datalist (Visual Web Developer Tool) and I get stuck because I don't know how to address the onmouseover="doTooltip(event,0)" in the HTML.

I have 8 events
messages[0] = new Array('/images/picture1.jpg', 'width="70" height="70"');
messages[1] = new Array('images/picture2.jpg','width="70" height="70"');
messages[2] = new Array('images/picture3.jpg','width="70" height="70"');
messages[3] = new Array('images/picture4.jpg',''width="70" height="70"');
messages[4] = new Array('images/picture4.jpg',''width="70" height="70"');
messages[5] = new Array('images/picture4.jpg',''width="70" height="70"');
messages[6] = new Array('images/picture4.jpg',''width="70" height="70"');
messages[7] = new Array('images/picture4.jpg',''width="70" height="70"');
messages[] = new Array('images/picture4.jpg',''width="70" height="70"');

Any Help?