ddimgtooltip: How to change images in tooltip array after they are already defined?

[kdittmann]

1) Script Title: ddimgtooltip

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

3) Describe problem: This script has you place the picture declarations right into the script as follows. I'm having trouble later replacing the images in the tooltips, after they are already defined.



var ddimgtooltip={
tiparray:function(){
var tooltips=[]

//define image tooltips here
tooltips[0]=["http://www.mysite.com/1.jpg", "description 1", {background:"#FFFFFF"}]
tooltips[1]=["http://www.mysite.com/2.jpg", "description 2", {background:"#FFFFFF"}]
tooltips[2]=["http://www.mysite.com/3.jpg", "description 3", {background:"#FFFFFF"}]

return tooltips //do not remove/change this line
}(),

tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
tipprefix: 'imgtip', //tooltip ID prefixes
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
},
positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},
showbox:function($, $tooltip, e){
$tooltip.show()
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
$tooltip.hide()
},
init:function(targetselector){
jQuery(document).ready(function($){
var tiparray=ddimgtooltip.tiparray
var $targets=$(targetselector)
if ($targets.length==0)
return
var tipids=[]
$targets.each(function(){
var $target=$(this)
$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
var tipsuffix=parseInt(RegExp.$1) //get d as integer
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
$target.mouseenter(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.showbox($, $tooltip, e)
})
$target.mouseleave(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.hidebox($, $tooltip)
})
$target.mousemove(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.positiontooltip($, $tooltip, e)
})
if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
$tooltip.mouseenter(function(){
ddimgtooltip.hidebox($, $(this))
})
}
})

}) //end dom ready
}
}
//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")





I'd like to be able to later to dynamically change some or all of the photos in the array. How would I go about doing this?

I tried this in to later change tooltip 3 to image 4, but it does not work:



ddimgtooltip.tiparray[2]=["http://www.mysite.com/4.jpg", "description 4", {background:"##FFFFFF"}]

ddimgtooltip.init("*[rel^=imgtip]")



Any help? Thank you!
Kristi

[jscheuer1]

jQuery('#imgtip2 img').attr('src', 'http://www.mysite.com/4.jpg');

But of course that won't change the description. For that you could do:


jQuery('#imgtip2 div').eq(1).html('description 4');

Then for the background:


jQuery('#imgtip2').css({background:"#ffffff"});

Or, putting it altogether using jQuery's chaining:


jQuery('#imgtip2').css({background:"#ffffff"})
.find('img').attr('src', 'http://www.mysite.com/4.jpg').end()
.find('div').eq(1).html('description 4');

[kdittmann]

Thank you so much for helping! I'm working on your solution and will let you know how it goes. Greatly appreciated!

[kdittmann]

John, it works perfectly, Thanks again!
Kristi