Results 1 to 4 of 4

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

  1. #1
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

    Code:
    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:

    Code:
    ddimgtooltip.tiparray[2]=["http://www.mysite.com/4.jpg", "description 4", {background:"##FFFFFF"}] 
    
    ddimgtooltip.init("*[rel^=imgtip]")
    Any help? Thank you!
    Kristi

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Code:
    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:

    Code:
    jQuery('#imgtip2 div').eq(1).html('description 4');
    Then for the background:

    Code:
    jQuery('#imgtip2').css({background:"#ffffff"});
    Or, putting it altogether using jQuery's chaining:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you, working on this solution

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

  4. #4
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John, it works perfectly, Thanks again!
    Kristi

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •