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

  function

  animation

  nested loop

 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.

  HEAD

  DIV

  BODY

  IMAGE SRC

 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 name attribute

  the image's pixels (no. of pixels)

  the image's div tag

  the image's class

 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
____________________________________________?

  None of these options are correct

  document.images.myimage01 //first image

  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"

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

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

  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:

  None of these options are correct

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

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

 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>

  None of these options are correct

  produces an image slideshow

  produces an image deletion facility

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

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

  preloading images

  cache imaging

  loader imaging

  link imaging

 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>

  BODY

  HEAD

  SCRIPT

  DIV

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

  

  FALSE


Report an error