www.webdeveloper.com
Results 1 to 2 of 2

Thread: Image Rollover/Tooltip Won't Function Properly

  1. #1
    Join Date
    Dec 2010
    Posts
    2

    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)

  2. #2
    Join Date
    Dec 2010
    Posts
    2
    Sorry I never put in those two hyperlinks:

    The site point link is: http://www.sitepoint.com/books/javascript1/code.php
    The link to my page is: http://www.coldgraphite.com/Explo

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles