Image Rollover/Tooltip Won't Function Properly

JavaScript
1

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:

// 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

I gather you’re trying to display the enlargement of a thumbnail when the thumbnail is hovered on.

would something like this be simpler?

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
fieldset {
width: 320px
}
.thumbs {
width: 150px
}
.enlargements {
width: 400px
}
.thumb_container {
float: left;
width: 150px;
position: relative
}
.enlargement_container {
display: none
}
.thumb_container:hover .enlargement_container {
position: absolute;
top: 0px;
left: 300px;
display: block
}
 
</style>
</head>
<body>

<fieldset>
<div class="thumb_container">
 <img class="thumbs" alt="" title="some title" src="pic1.jpg" />
    <div class="enlargement_container">
     <img class="enlargements" alt="" title="some title" src="pic1.jpg" />
    </div>
</div>
<div class="thumb_container">
 <img class="thumbs" alt="" title="some title" src="pic2.jpg" />
    <div class="enlargement_container">
     <img class="enlargements" alt="" title="some title" src="pic2.jpg" />
    </div>
</div>
<div class="thumb_container">
 <img class="thumbs" alt="" title="some title" src="pic3.jpg" />
    <div class="enlargement_container">
     <img class="enlargements" alt="" title="some title" src="pic3.jpg" />
    </div>
</div>
<div class="thumb_container">
 <img class="thumbs" alt="" title="some title" src="pic4.jpg" />
    <div class="enlargement_container">
     <img class="enlargements" alt="" title="some title" src="pic4.jpg" />
    </div>
</div>
</fieldset>

</body>
</html>

you can then add js to create the elements dynamically by first putting the image paths in an array.

3

This method is a more traditional rollover am I right? Rollovers are nice but I liked the idea of the tooltip containing the expanded image to separate it out from the page without having to open a new one.

4

you can use js to display the rollovers/tooltips but then you will probably need a Plan B for javascript disabled browsers.

you can always play with the css so that it replicates a tooltip without needing js.

normally, my image paths would be stored in a database table and the html would be generated dynamically with php and any popups/tooltips/enlargements would be controlled with css

5

One of the problems with the original code is that img elements aren’t allowed to contain any children.


//attaches the span to the thumbnail
image.appendChild(tip);

That is strictly a no-no.

From the HTML 4.01 specs (bold formatting added):

<!ELEMENT IMG - O EMPTY – Embedded image –>

6

I wondered if that wasn’t true, any suggestions then?

What if instead of attaching it to the image, I attached it to the container that might work right?

7

That all sounds good, but a little over my head. Maybe I bit off more than I could chew here…

8

I suggest that you investigate other tooltip scripts that are already out there, because you don’t want to reinvent the wheel yet again.

Here are some for your consideration:

20 Tooltips Script usages With Ajax, Javascript And CSS
30+ Tooltips Scripts With JavaScript, Ajax & CSS
40+ Tooltips Scripts With AJAX, JavaScript & CSS
50+ Tooltips Scripts With AJAX, Javascripts, CSS & Tutorials

Notice a pattern there? :slight_smile:

You will find several that are to your taste among that lot.

9

How about a jQuery plugin then. That keeps thing nice and simple.

jQuery Thumbnail hover popup - [url=“http://home.comcast.net/~littlemoe85/thumbhover/index.html”]demo

10

I think you first have to decide which technology to use to implement your tooltips.

If you decide on javascript and/or AJAX (which is js anyway) and you will have to also support javascript disabled browsers, then you will have to come up with a Plan B which imho should be a pure css solution.

with a non javascript solution you could have your tooltips stored in server side arrays or a database and then generate the html on page load and let css control the show/hide of the tooltips.

anyway, just food for thought and good luck whichever way you decide to go :slight_smile:

11

Alright, I’ll do that. Thanks so much for your help you guys! And thanks for taking the time!