162 chapters 6 and 7

Question 1

When you move your mouse over an image, it changes to another image

Answer 1

image rollover

Question 2

To swap in another image file, you just use the ______ function to set the tag’s _____ property to a new file

Answer 2

attr(), src

Question 3

What is the problem with swapping in a new image by changing the src and how can this problem be fixed?

Answer 3

If you wait till someone mouses over an image before downloading the new graphic there will be a delay. You can preload the new image.

Question 4

What does preloading an image mean?

Answer 4

forcing the browser to download the image before you plan on displaying it by storing it in the web browser’s cache so that any requests for that file are served from the user’s hard drive instead of from the web server

Question 5

What is the best way to preload a bunch of images on the same page?

Answer 5

by using a for loop to place each image in an array

Question 6

In the following code, what is happening in line 7?
1 $('#gallery a').click(function(evt) {
2        evt.preventDefault();
3        var imgPath = $(this).attr('href');
4        var oldImage = $('#photo img');
5        var newImage = $('<img>');
6       newImage.hide();
7       $('#photo').prepend(newImage);
8       newImage.fadeIn(1000);
9       oldImage.fadeOut(1000,function(){
10            $(this).remove();
11      }); // end fadeout
12 }); // end click
13 $('#gallery a:first').click();

Answer 6

The prepend() function is used to add the HTML inside (at the very beginning) of the tag causing the photo <div> to have two images on top of each other with the top image being invisible.</div>

Question 7

What two events are required for a rollover image effect?

Answer 7

Mouseover and Mouseout

Question 8

How many arguments does the hover() function take and what are they?

Answer 8

1. Anonymous function telling the browser what to do when the mouse over the image
2. a function telling the browser what to do when the mouse moves off the image

Question 9

What does $(this) refer to?

Answer 9

a particular instance of an element. ie: a specific img element in a group of img elements

Question 10

How can you specify the new image in the rollover loop easily and generically?

Answer 10

Store the original and new images in the same folder and name them similarly. The path to the original and new image remains the same.
example: add _hover to the end of all new images in the folder dog<– new image

Question 11

What method is used to change the matched text with something else in the process of creating a roll over?

Answer 11

replaice(‘replacementStringHere’)

Question 12

In a photo gallery, ________ JavaScript means users who have JavaScript turned off will still be able to access larger versions of the photo

Answer 12

unobtrusive

Question 13

What event is used for viewing a larger image from a thumbnail in a photo gallery?

Answer 13

the click event

Question 14

functions that are executed in response

to an event automatically have the _____ _______ passed to them

Answer 14

event object

Question 15

To prevent the web browser from
following the link for those who have JavaScript enabled, you run the event
object’s _______ function

Answer 15

preventDefault()

Question 16

What does $(this) refer to in the following code:
$('#gallery a').click(function(evt) {
      evt.preventDefault();
      var imgPath = $(this).attr(‘href’);
}); // end click

Answer 16

The element that is clicked

Question 17

A link’s ______ attribute points to the page or resource the link goes to

Answer 17

href

Question 18

In the following code, \_\_\_\_\_\_\_\_ selects all images on the page:
1 $('#gallery a').click(function(evt) {
2        evt.preventDefault();
3        var imgPath = $(this).attr('href');
4        var oldImage = $('#photo img');
5        var newImage = $('<img>');
6       newImage.hide();
7       $('#photo').prepend(newImage);
8       newImage.fadeIn(1000);
9       oldImage.fadeOut(1000,function(){
10            $(this).remove();
11      }); // end fadeout
12 }); // end click
13 $('#gallery a:first').click();

Answer 18

$(‘img’)

Question 19

In the following code, what is happening in line 5?
1 $('#gallery a').click(function(evt) {
2        evt.preventDefault();
3        var imgPath = $(this).attr('href');
4        var oldImage = $('#photo img');
5        var newImage = $('<img>');
6       newImage.hide();
7       $('#photo').prepend(newImage);
8       newImage.fadeIn(1000);
9       oldImage.fadeOut(1000,function(){
10            $(this).remove();
11      }); // end fadeout
12 }); // end click
13 $('#gallery a:first').click();

Answer 19

it creates a new <img></img> tag by concatinating three strings and stores it in a variable named newImage

Question 20

In the following code, \_\_\_\_\_\_\_\_ holds a jQuery selection containing the <img> tag inside
the photo <div> :
1 $('#gallery a').click(function(evt) {
2        evt.preventDefault();
3        var imgPath = $(this).attr('href');
4        var oldImage = $('#photo img');
5        var newImage = $('<img>');
6       newImage.hide();
7       $('#photo').prepend(newImage);
8       newImage.fadeIn(1000);
9       oldImage.fadeOut(1000,function(){
10            $(this).remove();
11      }); // end fadeout
12 }); // end click
13 $('#gallery a:first').click();</div>

Answer 20

oldImage

Question 21

In the following code, what is happening in line 6?
1 $('#gallery a').click(function(evt) {
2        evt.preventDefault();
3        var imgPath = $(this).attr('href');
4        var oldImage = $('#photo img');
5        var newImage = $('<img>');
6       newImage.hide();
7       $('#photo').prepend(newImage);
8       newImage.fadeIn(1000);
9       oldImage.fadeOut(1000,function(){
10            $(this).remove();
11      }); // end fadeout
12 }); // end click
13 $('#gallery a:first').click();

Answer 21

The image stored in the newImage variable is

hidden using the hide() function

Question 22

A ______ image is just an image swap

Answer 22

rollover

Question 23

when does the callback() function run?

Answer 23

after the fade out effect finishes