Images with Dynamic Captions (JQuery)


IsoTut Series: First Entry

Have you ever used Image Buttons on your website – either for a menu or a portfolio, but wanted to enhance their display by adding captions activated on a Mouse-over event for effect?

Animations can really change/enhance the look and feel of your web-site. The majority of people are impressed by them when they emphasise a feature in the correct way. I will go into more detail in another post.

This Tutorial example will explain how you can add image buttons with dynamic captions to your web-site in a few seconds:

Step 1:

Add an image to your HTML page and center it:

To achieve the desired outcome, the image will be added behind the caption as a “background” (in this instance in a parent container), with a caption added to a second/“child div”. Initialise this div’s “style” element so that the contents of this container will not display on page load:


	

Step 2

You can either add your CSS to a separate style sheet, or you can add it to the top of your web-page in the section reserved for styles (in the header of your HTML document). Name your outer div css class which will hold your image “background”. Name your inner div css class “caption”. It looks really cool if your underlying image is still visible underneath the caption, so we give the div holding the caption an opacity grade of 0.4/40 (for Internet Explorer). You can also add some padding to your caption so that your text does not sit on the edge of your image, but will have a nice border around it. The use of other style elements may also be considered:


		div.background{
		width:200px;
 		height:300px;
		margin: 10px auto;
		background-image: url('http://lh4.ggpht.com/_knAc_KBOfFw/S-hWvpndSZI/AAAAAAAAGIQ/FcdebPpdy_I/s300/IMG_8914.JPG');
		}

		div.caption{
 		height:150px;
  		background-color:#000000;
		font-size: 30px;
		padding: 10px 0 0 10px;
 		opacity:0.4;
 		filter:alpha(opacity=40); /* For IE8 and earlier */
  		}


Step 3

Now add the reference to the jQuery javascript library we will include for this example. This library includes complex scripts that have been selected and have been made available on the world


		

The reference may be included at the end of the document – just before the close of the body tag for this example.

Step 4

Now add your javascript to the page that will be used to show and hide your caption. This too can be done either in the header of your html document or in a seperate .js javascript file that contains all your project’s javascript functions:


		$(".background").mouseenter(function(){
   			 $("#div3").fadeIn(3000);
  		});
		$(".background").mouseleave(function(){
    			$("#div3").fadeOut(3000);
  		});

Click here to view the end result you should expect after completing IsoTut1