Demo 13 :: JQuery Objects

JQuery objects are neat ways to hold information that you can then later access. It is also used so that it is a lot easier bundle a script together so that it can be used for different projects. The jQuery code in this demo shows a variable holding a bunch of functions to be used to show the images. Using the variables, this script is easily transferrable to other projects.

View the HTML code

<ul>
    <li><a href="../lib/img/flowers/blue-to-purple-perennial-flowers-1.jpg" class="hoverOver">Blue Flowers</a></li>
    <li><a href="../lib/img/flowers/flowers-595.preview.jpg" class="hoverOver">Pink Flowers</a></li>
    <li><a href="../lib/img/flowers/rose-634.jpg" class="hoverOver">Red Flower</a></li>
</ul>

View the jQuery code

var linkClass = '.hoverOver';//variable holds the class name of the tag
var ITT = {//variable holds an object
	mouseOver: function(){//mouseOver part of object
		$(linkClass).hover(function(e) {//uses the variable holding the class for hover in
			var imgSource = $(this).attr('href')//variable holds the href of the tag with the class
			$('<div class="showImage"></div>')//creates a div with class of showImage
				.css('top', (e.pageY - 10) + 'px')//gives the div a top posistion of the mouse's current position minus 10 pixels
				.css('left', (e.pageX + 20) + 'px')//gives the div a left position of the mouse's current position plus 20 pixels
				.fadeIn('slow')//fades the div in slowly
				.appendTo('body');//puts the div at the end of the body tag
			$('<img />')//creates an image tag
				.attr('src', imgSource)//gives it a source attribute with the value of the link from the href
				.appendTo('.showImage')//appends the image to the end of the showImage div
		}, function() {// Hover out 
			$('.showImage').remove();//removes the showImage div
		}).mousemove(function(e){//function for following the mouse movement
			$('.showImage')
				.css('top', (e.pageY - 10) + 'px')//positions the div 10 pixels above the cursor
				.css('left', (e.pageX + 20) + 'px');//positions the div 20 pixels right of the cursor
			
			return false;
		});
		$(linkClass).click(function(e) {//function for when the link is clicked
		e.preventDefault();//prevents the link from being clicked
		});
	}
}

$(document).ready(function(){
	ITT.mouseOver();//runs the mouseOver function from the ITT variable object
});