jQuery Apps

        I have finally made a collection of jQuery Applications, which i have used throughout a couple of websites.

Hover
FaceBook RSS 

WITHIN JQUERY document.ready Function 
$("#shortcut a img").hover(function() {
	$(this).animate({opacity: 1.0},200);
}, function () {
	$(this).animate({opacity: 0.4},200);
});

WITHIN BODY tag
<div id="shortcut">
<a href="javascript:void(0);"><img src="images/layout/facebook.gif" alt="FaceBook"></a>
<a href="javascript:void(0);"><img src="images/layout/rss.gif" alt="RSS"></a>
</div>

Make sure the jQuery tags are ("#idtag a img")... if the img tag is left out, this will not work in IE. Also, take notice that this applies to all the A IMG's combinations within the #idtag.

Image Box
Description of BHP Concepts Description of Horse Tack Express 

WITHIN JQUERY document.ready Function 

check out http://www.3dprog.com/js/imageLoader.js

WITHIN BODY tag

<a href="javascript:void(0);" title="images/websites/bhpconcepts.jpg" class="image" id="300"
 name="300"><img src="images/websites/thumb/bhpconcepts.jpg"
	 alt="Description of BHP Concepts" width="50" height="50"></a>
<a href="javascript:void(0);" title="images/websites/horsetackexpress.jpg" class="image" id="300" name="300"><img 
	src="images/websites/thumb/horsetackexpress.jpg" alt="Description of Horse Tack Express" width="50" height="50"></a>

Look at my source code to find the #imageBox mentioned in the jQuery click function. It is just a div with an empty img tag. I have now made a js file, http://www.3dprog.com/js/imageLoader, that appends the boxes to the body (bgshadow and imageBox). All that is needed, is to put the pictures inside a DIV or SPAN that has ID='image'.