SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I gather you're trying to display the enlargement of a thumbnail when the thumbnail is hovered on.

    would something like this be simpler?


    Code:
     
    <!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. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    I gather you're trying to display the enlargement of a thumbnail when the thumbnail is hovered on.

    would something like this be simpler?


    Code:
     
    <!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.
    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. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    One of the problems with the original code is that img elements aren't allowed to contain any children.

    Code javascript:
    //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 -->
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    One of the problems with the original code is that img elements aren't allowed to contain any children.

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

    That is strictly a no-no.

    From the HTML 4.01 specs (bold formatting added):
    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. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    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
    That all sounds good, but a little over my head. Maybe I bit off more than I could chew here...

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by yokopolaris View Post
    I wondered if that wasn't true, any suggestions then?
    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?

    You will find several that are to your taste among that lot.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    I'm trying to keep it bare minimum, I don't know a thing about AJAX and I'm worried I won't be able to implement a script I don't understand.
    How about a jQuery plugin then. That keeps thing nice and simple.

    jQuery Thumbnail hover popup - demo

  10. #10
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, I'll do that. Thanks so much for your help you guys! And thanks for taking the time!


Tags for this Thread

Bookmarks

Posting Permissions

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