HANDOUT TITLE:



INTRODUCTION TO JQUERY – JQUERY ROLLOVER IMAGES

In this exercise, you will add a rollover effect to a series of images. You will also add programming to preload the rollover images in order to eliminate any delay between mousing over an image and seeing the rollover image. In addition, you will use a technique to make the process of preloading and adding the rollover effect more efficient.

1. Locate, download, and unzip the folder named jQuery Rollover Images Site Files located on BREO to your My Sites folder and rename the folder as jQuery_Rollover_Images.

2. Create a new Dreamweaver site pointing to this folder.

The folder jQuery_Rollover_Images contains all the files that you need – the jQuery library file, CSS files and all the images required.

3. Open the file rollover_images\rollover_images.html.

The file contains a series of six images. Each image is wrapped by a link that points to a larger version of the photo and all of the images are wrapped in a tag with an ID of gallery.

Basically, you are trying to achieve two things:

• Preload the rollover image associated with each of the images inside the .

• Attach a hover( ) function to each image inside the . The hover( ) function swaps the rollover image when the mouse moves over the image, and then swaps back to the original image when the mouse moves off.

From this description, you can see that both steps are tied to the images inside the . Thus, one way to approach this problem is to first select the images inside the , and then loop through the selection - preloading each images’ rollover and attaching a hover( ) function.

The basic structure of the HTML includes a tag that surrounds a series of links with images in them. To make swapping in the new image easy, its file name is simply a version of the original image’s file name.

This file already contains a link to the jQuery file, and the $(document).ready( ) function – needed for JQuery. The first step is to select all of the images within the tag and set up a loop using the jQuery each( ) function.

4. Click in the empty line after the $(document).ready( ) function and type:

$('#gallery img').each(function( ) {

The selector #gallery img selects all tags within a tag that has the ID gallery.

jQuery’s each( ) function provides a quick way to loop through a bunch of page elements - performing a series of actions on each element. The each( ) function takes an anonymous function as its argument. It is a good idea to provide the code that completes the function, so you will do that next.

5. Press Return twice, and then type:

}); // end each

to close the anonymous function, end the call to the each( ) function and terminate the JavaScript statement.

Your code should now look like this:

$(document).ready(function( ) {

$('#gallery img').each(function( ) {

}); // end each

}); // end ready

At this point, the script loops through each of the images in the gallery but does not actually do anything yet.

The first requirement is to capture the image’s src property and store it in a variable that you will use later on in the script.

6. Click inside the empty line and type:

var imgFile = $(this).attr('src');

You can use $(this) to refer to the current element in the loop. In other words, $(this) will refer to each of the image tags in turn. The jQuery attr( ) function retrieves the specified HTML attribute. In this case, it retrieves the src property of the image and stores it in a variable named imgFile. For example, for the first image, the src property is images/small/blue.jpg which is the path to the image that appears on the page.

You can use that very src value to preload the image.

7. Hit Return to create a blank line, and then add the following three lines of code:

var preloadImage = new Image( );

var imgExt = /(\.\w{3,4}$)/;

preloadImage.src = imgFile.replace(imgExt,'_h$1');

To preload an image you must first create an image object. In this case, the variable preloadImage is created to store the image object. Next, we preload the image by setting the Image object’s src property.

One way to preload images is to create an array of images you wish to preload, and then loop through each item in the array creating an image object and adding the image’s source to the object.

In this example, you will use a more creative - and less labour-intensive method – to preload images. You just have to make sure you store the rollover image in the same location as the original image and name it similarly. For this web page, each image on the page has a corresponding rollover image with an _h added to the end of the image name. For example, for the image blue.jpg, there is a rollover image named blue_h.jpg. Both files are stored in the same folder, so the path to both files is the same.

Instead of manually typing the src of the rollover to preload it like this, preloadImage.src='images/small/blue_h.jpg', you can let JavaScript figure out the src by simply changing the name of the original image’s source so it reflects the name of the rollover. That is what the other two lines of code do.

The first line - var imgExt = /(\.\w{3,4}$)/; - creates a regular expression that matches a period followed by three or four characters at the end of a string. For example, it will match both .jpeg in /images/small/blue.jpeg and .gif in /images/orange.gif.

The next line - preloadImage.src = imgFile.replace(imgExt,'_h$1'); - uses the replace( ) method to replace the matched text with something else.

Here a .jpg in the path name will be replaced with _h.jpg so images/small/ blue.jpg is changed to images/small/blue_h.jpg. This technique is a little tricky since it uses a regular expression sub-pattern.

Now that the rollover image is preloaded you can assign the hover( ) event to the image.

8. Hit Return and then add the code listed below:

$(this).hover(

); // end hover

jQuery’s hover( ) function is just a shortcut method of applying a mouseover and mouseout event to an element. To make it work, you pass two functions as arguments. The first function runs when the mouse moves over the element - in this case, the image changes to the rollover. The second function runs when the mouse moves off the element - here, the rollover image swaps back to the original image.

9. In the empty line add the following three lines of code:

function( ) {

$(this).attr('src', preloadImage.src);

},

This first function simply changes the src property of the current image to the src of the rollover image. The comma at the end of the last line is required because the function you just added is acting as the first argument in a call to the hover( ) function - a comma separates each argument passed to a function.

10. Finally, add the second function as shown below:

function( ) {

$(this).attr('src', imgFile);

}

The finished script should look like this:

$(document).ready(function( ) {

$('#gallery img').each(function( ) {

var imgFile = $(this).attr('src');

var preloadImage = new Image( );

var imgExt = /(\.\w{3,4}$)/;

preloadImage.src = imgFile.replace(imgExt,'_h$1');

$(this).hover(

function( ) {

$(this).attr('src', preloadImage.src);

},

function( ) {

$(this).attr('src', imgFile);

}

); // end hover

}); // end each

}); // end ready

This second function simply changes the src attribute back to the original image. The path to the image originally on the page is stored in the variable imgFile. In this function, you access that value again to set the src back to its original value.

11. Save the page, view it in a web browser and mouse over each of the black and white images to see them pop into full colour.

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download