Image w/ description tooltip v2.0 Questions

[PpSi]

1) Script Title: Image w/ description tooltip v2.0

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

3) Describe problem: I want to how exactly how this script works.I'm by no means a javascript coder, in fact, I'm at my first serious project, and near completion.

I have two main questions:
1)Are the images&text preloaded at the same time with the webpage, or are those elements loaded only when needed(for instance, on mouseover)
2)No matter what is the answer at the first question, how would the script perform on a page with around 3000 tooltips?As in, 3000 pictures, each of which beeing a tooltip.

Also, can the format of the tooltip be changed?For instance, can the picture be on the right(or left ) side of the box, instead of the top side of the tooltip, as given in the examples?

Thanks in advance,
PpSi.

[FrickenTrevor]

If you need the change the location of the image (ie picture on the left side of the link rather than the right) look at the RED part highlighted.

It would work fine if you had 3000 links/pictures.. the only problem is that you would need to specify ALL of them (highlighted in ORANGE) plus it might be a bit slow, since I don't see any pre-loading on here. You would have to add some other preload script

var ddimgtooltip={

	tiparray:function(){
		var tooltips=[]
		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}

		tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
		tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
		tooltips[2]=["../dynamicindex14/winter.jpg"]
		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

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

	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips

And then in your HTMl you will need to do 3000 links

<p><a href="http://www.dynamicdrive.com" rel="imgtip[0]">Link 1</a></p>

[PpSi]

Thank you for your fast answer, and I am sorry for my slow one ^_^

I knew I had to make and specify 3000 links, I was more concerned about the load times...

Also, thank you for beeing so specific on how to change the formating of the tooltip, it helped me alot!I haven't started to integrate it into my website yet, I still have some writing to do( the coding went a lot faster :<), but I will post here if i succeeded or not.

Yours Gratefully,
PpSi.

[PpSi]

Ok so, I started implementing this one, it works great!

I was wondering though, is there any way to change the layout of the image&text?

as in, to turn this layout: into ?

I would like to stick to this script: It's easy to implement, and it does exactly what I need.I'd need only the layout changed a bit...

Any help would be greatly appreciated!

Later Edit: Problem Solved, it was easier than I thought.

 createtip:function($, tipid, tipinfo){
		if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
			return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
				'<div style="float:left"><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
	},

Initially, both were to "text-align:center".

[FrickenTrevor]

ok well if its how you want it can you change the prefix to Resolved please?

Go to the very first post on this topic, select Edit, and to the left of the Title you should see a drop down that says "Prefix" or "Suffix"

[PpSi]

I tried to, but the edit button isn't there :<