PDA

View Full Version : Image w/ description tooltip v2.0



fortuna
08-20-2011, 01:32 AM
I have set-up the text link but when I mouseover the link all I get is a small white box. I entered code with text and box formatting and when mouseover the link the text and appears in the box but no image. Can anyone help??

jscheuer1
08-20-2011, 05:05 AM
Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post (http://www.dynamicdrive.com/forums/showpost.php?p=7) for more information.

Please post a link to a page on your site that contains the problematic code so we can check it out.

fortuna
08-20-2011, 01:23 PM
Here is the ToolTip page with the instructions I followed: http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm#

Here is the page I am trying to incorporate the text to image flyout: http://sequoiaorchids.com/orchidgallery.htm#top

Thank you in advance.

jscheuer1
08-20-2011, 04:46 PM
In ddimgtooltip.js the first image is listed wrong:


tooltips[0]=["images/sophiafrae300.jpg", "Sophia Frae", {background:"white", font:"bold 12px Arial"}]


It should be:


tooltips[0]=["images/Flowers/Orchids/OrchidsBig/sophiafrae300.jpg", "Sophia Frae", {background:"white", font:"bold 12px Arial"}]


Later in the same script, a path fragment is introduced that throws all the images off:


createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="a_sequoianew/' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},

Remove it so it looks like:


createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},

There could also be other problems, but I think that's it, and just that much should get the images showing up. Be sure to clear the browser cache and refresh the page after making and uploading the changes.

fortuna
08-22-2011, 12:52 AM
Thank you John that did the trick - I really appreciate your help!!