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/dynamici...agetooltip.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