Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Massachusetts
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Image Rollover/Tooltip Won't Function Properly

    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)
    Last edited by yokopolaris; 12-18-2010 at 08:34 PM. Reason: Updated published page URL


 

Tags for this Thread

Posting Permissions

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