Cool DHTML Tooltip -brings up text u type in...can it bring up images/logos?? [Archive]

TerriTech

08-29-2012, 10:25 PM

1) Script Title: :: Cool DHTML Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

3) Describe problem: There is no problem, this is a cool tip I have on the website. It works and brings up text that I type in. I'm just now wondering if it can be programmed/changed somehow to bring up images/logos when mouse rollovers the selected text (or another image). Please let me know. Thanks!!

~TerriTech

jscheuer1

08-30-2012, 01:54 AM

Well, yeah. It doesn't need to be changed. You can just put the HTML tags for what you want in there, but it can get tricky, so a small change in how you use it is a good idea. At the end of the script, add this highlighted code as shown:

. . . tyle.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

ddrivetip.tips = [ // numbers are comments for reference, the tips are numbered in the order in which they appear, starting with 0
'What a wonderful sunny day!<br><img src="sunnyday.jpg" alt="">', //0
'<img src="somelogo.png" alt="">', //1
'This one\'s just text and has an escaped apostrophe in it' //2 - no comma after the last tip
];

</script>

Now instead of using (from step 3 on the demo page:

onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)";
onMouseout="hideddrivetip()"

You can use (notice that ddrivetip.tips[0] is not quoted):

onMouseover="ddrivetip(ddrivetip.tips[0],'yellow', 300)";
onMouseout="hideddrivetip()"

That one will show the text and image from the 0 index of the newly created ddrivettip.tips array:

What a wonderful sunny day!<br><img src="sunnyday.jpg" alt="">

For another you could do:

onMouseover="ddrivetip(ddrivetip.tips[1],'yellow', 300)";
onMouseout="hideddrivetip()"

It will show the 1 index one:

<img src="somelogo.png" alt="">

And so on. You can add as many as you like to the ddrivetip.tips array. You don't have to use them all. Just remember they will be in order from 0 to however many you have, and remember not to put a comma after the last one.

Another option would be to try:

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm