small image popup from a number/text link

[mudge]

1) Script Title: Image w/ description tooltip (POSSIBLY)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...getooltip.htm#

3) Describe problem: Hi all DD'ers. I'm in the process of changing my photo based site and have decided to have a cleaner look so have done away with thumbs and replaced them with numbered links. As i generally have 50+ links per page it may get frustrating for any visitor wanting to see what image lay behind each link.
I therefore would like a small version of my larger image popup when hovered over the number link but would also like the visitor to be taken to the larger image when the link is clicked on. Any ideas if this script is best for my needs? many thank - mike

[ddadmin]

Hmm, using the script Image w description tooltip, why not just link to the enlarged image for each of the link's href attribute? For example:

<a href="enlarged.gif" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="enlarged2.gif" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>

This way, when the user moves the mouse over a link, a pop up will display inline on the page showing the desired smaller preview image, then if he/she actually clicks on the link, they're taken to the actual enlarged image. FYI, the preview images are specified as HTML inside the script itself:

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

[mudge]

this sounds just what i require. As i am lacking totally in knowledge of ALL coding please bear with me as i ask a further question to your reply. I don't have any smaller versions of the larger images so i presume i need to do these and if so do i place them in a paticular folder? Sorry if this really sucks as a question but i am that thick with this sort of stuff but i hope to learn a little and make it go along way :-)

Appreciate your help and time - mike

You can see what i am after here

[ddadmin]

The smaller versions of the actual images can reside in any directory; just make sure inside the script, you specify absolute paths to them. For example, using one of the links on your page as an example:

<td align="center" bgcolor="#000000" height="20" width="20"><a href="http://www.photos-london.com/oct07/big_ben_001.htm" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><img border="0" src="1.gif" width="20" height="20"></a></td>

Notice the code in red. Then, assuming you've created a smaller version of this image to pop up when the mouse rolls over the above link, inside the script, you would define:

messages[0] = new Array('http://www.photos-london.com/subdir/DSC_0259small.gif','Here is a smaller version of London',"#FFFFFF");

And so on...

[mudge]

fantastic Thank you for taking the trouble to simplify things and show an actual example of how a link of my image should be. I'm still in the process of uploading images and will tackle the tooltip script when i'm ready. A big thanks - mike

[mudge]

Hurrah Sorry about my previous posting but i've finally managed to get the tooltip working. There's a little bit of tweaking to do re centering of text and possibly change the b/gnd colour etc but other than that it's great. All the best and again many thanks for the help - mike