First of all, hi everyone I'm new to the forum and relatively new to javascript. I just completed a course in it at university and I did pretty well but I think we all know "real life" coding is a whole other story.

Now, down to business. I'm writing up a script, derived from a sitepoint example (available for download here). I want to bring up a dynamic tool tip, on mousover of a thumbnail, that contains one large picture. The style for the tooltip is handled in the css sheet and therefor not featured here. I am also using the sitepoint Core library, similarly available for download at the aforementioned link.

I've been working on this for a while with no success. Here's what I know for certain so far:

  • the showTipListener is running on mouseover
  • the span and the img are being created
  • the img is receiving the correct src
  • the img is being attached to the span
  • the span is being attached to the thumbnail



What I don't know is why the tooltip never appears and why the default action is not being canceled. Any thoughts would be greatly appreciated, thanks in advance for your help!

I've published the page here so that you all can observe it's behavior.

An of course here's the code:
Code:
// JavaScript Document
var Tooltips =
{
	//contains the source for each full sized image
	fullImages: [
				"PhotoPortfolio/AdriSelfPortraits.jpg",
				"PhotoPortfolio/AmyUtah.jpg",
				"PhotoPortfolio/AveQ.jpg",
				"PhotoPortfolio/Bingham.jpg",
				"PhotoPortfolio/BinghamD12.jpg",
				"PhotoPortfolio/Campus.jpg",
				"PhotoPortfolio/Campus2.jpg",
				"PhotoPortfolio/Clambake.jpg",
				"PhotoPortfolio/Construction.jpg",
				"PhotoPortfolio/DadInKobeJapan.jpg",
				"PhotoPortfolio/DadInTheGarden.jpg",
				"PhotoPortfolio/HesperSongWriter.jpg",
				"PhotoPortfolio/IrishCoast.jpg",
				"PhotoPortfolio/NathanHale.jpg",
				"PhotoPortfolio/NorthConway.jpg",
				"PhotoPortfolio/Oreo.jpg",
				"PhotoPortfolio/Portsmouth.jpg",
				"PhotoPortfolio/Portsmouth2.jpg",
				"PhotoPortfolio/Portsmouth3.jpg",
				"PhotoPortfolio/RockClimbing.jpg",
				"PhotoPortfolio/RockClimbing2.jpg",
				"PhotoPortfolio/RockClimbing3.jpg",
				"PhotoPortfolio/RockClimbing4.jpg",
				"PhotoPortfolio/RockClimbing5.jpg",
				"PhotoPortfolio/RockClimbing6.jpg",
				"PhotoPortfolio/RockClimbing7.jpg",
				"PhotoPortfolio/Seaport.jpg",
				"PhotoPortfolio/Seaport2.jpg",
				"PhotoPortfolio/Snowbird.jpg",
				"PhotoPortfolio/VanderbuiltSkies.jpg",
				"PhotoPortfolio/VanderbuiltSkies2.jpg",
				],
	init: function()
	{
		//collects all the images on the page with the RollOverMe class and stroes them in image
		var image = Core.getElementsByClass("RollOverMe");
		//adds the event listener to all images' mouseover and mouseout events
		for (i=0; i<image.length; i++)
		{
			Core.addEventListener(image[i], "mouseover", Tooltips.showTipListener);
			Core.addEventListener(image[i], "mouseout", Tooltips.hideTipListener);
		}
	},
	
	showTip: function(image)
	{
		//retrieve the class number and strip out the string characters, store the number to a variable
		var sourceMatch = /(^| )source(\d+)( |$)/.exec(image.className);
        var source = parseInt(sourceMatch[2], 10);
		//creates a span element
		var tip = document.createElement("span");
		//assigns it to the class tooltip
		tip.className = "tooltip";
		//creates an image
		var tipImage = document.createElement('img');
		//sets the src attribute to appropriate element in the fullImages property using the variable source
		tipImage.src = Tooltips.fullImages[source];
		//attaches the image to the span
		tip.appendChild(tipImage);
		//attaches the span to the thumbnail
		image.appendChild(tip);
		//sets the tooltip property to display the span
		image._tooltip = tip;
		// Fix for Safari2/Opera9 repaint issue
		document.documentElement.style.position = "relative";
	},
	
	hideTip: function(image)
	{
		if (image._tooltip)
		{
			image.removeChild(image._tooltip);
			image._tooltip = null;
			
			// Fix for Safari2/Opera9 repaint issue
			document.documentElement.style.position = "static";
		}
	},
	
	showTipListener: function(event)
	{
	Tooltips.showTip(this);
	Core.preventDefault(event);
	},
	
	hideTipListener: function(event)
	{
	Tooltips.hideTip(this);
	}
};
Core.start(Tooltips)