Preview

12 - JavaScript and Images

 1. It is possible to use the mouseover and mouseout events that apply to images to implement a rudimentary ______________

  virtual mouse

  animation

  nested loop

  function

 2. Fill in the blanks with the most appropriate word.
JavaScript and working with images
==================================

This may involve creating new images, 
setting up an array of images, 
changing the source attribute in the BODY tag, 
or just doing some simple (or not so simple) animation with them. 

Starting out, it is useful to note that we reference images
in the ___________ tag.

  IMAGE SRC

  DIV

  HEAD

  BODY

 3. Images to JavaScript are an array of images, so you use "[ ]" to access each image, "[0]" being the first one. Identifying a specific image can be tricky. For this reason we can also reference an image in JavaScript via____________________
Source: javascriptkit.com
javascript_images_1.png

  the image's div tag

  the image's name attribute

  the image's class

  the image's pixels (no. of pixels)

 4. To reference an image via the name attribute you could use the following (fill in the blanks after reading the excerpt)
<img name="myimage01" src="whatever.gif" />
Now, to access this image, this is what you'd do instead:

document.images["myimage01"] //first image
//OR
____________________________________________?

  document.images.myimage01 //first image

  None of these options are correct

  document.images.01

  document.IMG=src=01

 5. In the following code, what happens when you click the "Try it" button?
<!DOCTYPE html>
<html>
<body>

<p>Click the button to create an IMG element.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.createElement("IMG");
  x.setAttribute("src", "thisisanimage.jpg");
  x.setAttribute("width", "304");
  x.setAttribute("height", "228");
  x.setAttribute("alt", "Name of the image goes here");
  document.body.appendChild(x);
}
</script>

</body>
</html>

  An image will appear inside the button itself. The button text will change to "Name of the image goes here"

  An image will appear on the page, followed by the text "Name of the image goes here"

  Nothing - there will be an error and the page will close. There is no such thing as an IMG element

  None of these options are correct

 6. What is happening in this line of code?
var x = document.createElement("IMG");

  We are creating an img element by using the document.createElement() method:

  We are creating an image called 'x' and giving it the value 'IMG'

  None of these options are correct

  We are creating the caption for an image and storing it in variable x

 7. What does the following code do?
<html>
<head>
<script type="text/javascript">
<!--
image01= new Image()
image01.src="1.gif"
image02= new Image()
image02.src="3.gif"
//-->
</script>
</head>

<body>
<a href="whatever.htm" onmouseover=
"document.images['example'].src=image02.src" onmouseout=
"document.images['example'].src=image01.src">
<img src="1.gif" name="example"></a>
</body>

</html>

  produces an image roll over effect (on mouse in and out)

  None of these options are correct

  produces an image slideshow

  produces an image deletion facility

 8. Loading an image into cache before being used, so whenever we want to use it, bam, it appears instantaneously is referred to as:

  link imaging

  cache imaging

  loader imaging

  preloading images

 9. We can preload an image by creating an instance of the image object in the ______ section of the page, and assigning the image we wish to preload to its src property.
<head>
<script type="text/javascript">
<!--
image01= new Image()
image01.src="1.gif"
image02= new Image()
image02.src="3.gif"
//-->
</script>
</head>

  DIV

  BODY

  SCRIPT

  HEAD

 10. "src" is a read/write string specifying the URL of the image

  FALSE