Question

In: Computer Science

JavaScript Task Load three images of colorful fall leaves and using functions with parameters do the...

JavaScript Task

  1. Load three images of colorful fall leaves and using functions with parameters do the following. (Remember you can call the same function multiple times sending the function different values.)
  2. When you move the mouse over the first image, have the second image change to a pumpkin.
  3. When you move the mouse off of the first image, have the second image change back to the original leaves.
  4. When you move the mouse over the second image, have the third image change to a picture of a black cat.
  5. When you move the mouse off of the second image, have the third image change back to the original leaves.
  6. When you move the mouse over the third image, have the first, second and third images change to images of Cocky.
  7. When you move the mouse off of the third image have all three images change to  pictures of – you decide. Your code and images should not be like anyone else’s.
  8. Insert a comment saying what your images are of.

Solutions

Expert Solution

<html> <!--styling the images side by side-->

    <style>

        * {

          box-sizing: border-box;

        }

        .column {

          float: left;

          width: 33.33%;

          height: 75%;

          padding: 5px;

        }

        

        /* Clearfix (clear floats) */

        .row::after {

          content: "";

          clear: both;

          display: table;

        }

        </style>

<body>

<div class="row">

    <div class="column">

        <!--image 1 is leaves images for first image

         image 2 is leaves images for second image

         image 1 is leaves images  for third image

        onmouseover and onmouseout are used for images changing-->

      <img src="1.jpg"  id="1" onmouseover="bigImg1(this)" onmouseout="normalImg1(this)" style="width:100%;height:100%">

    </div>

    <div class="column">

      <img src="2.jpg" id="2" onmouseover="bigImg2(this)" onmouseout="normalImg2(this)" style="width:100%;height:100%">

    </div>

    <div class="column">

      <img src="3.jpg"  id="3" onmouseover="bigImg3(this)" onmouseout="normalImg3(this)" style="width:100%;height:100%">

    </div>

  </div>

        <!--image pumpkin.jpg is pumpkin images for Second image when mouse is on first image

         image black.jpg is black cat images for third image when mouse is on second image

         image cocky.jpg is cocky images for first,Second image when mouse is on third image

        bigImg all functions called when mouse comes over the pictures

        normalImg all functions called when mouse moves out of the pictures-->

<script>

function bigImg1() {

  document.getElementById("2").src="pumpkin.jpg"

}

function normalImg1(x) {

  x.style.height = "100%";

  x.style.width = "100%";

  document.getElementById("2").src="2.jpg"

}

function bigImg2() {

  document.getElementById("3").src="black.jpg"

}

function normalImg2(x) {

  x.style.height = "100%";

  x.style.width = "100%";

  document.getElementById("3").src="3.jpg"

}

function bigImg3() {

  document.getElementById("1").src="cocky.jpg"

  document.getElementById("2").src="cocky.jpg"

}

function normalImg3(x) {

  x.style.height = "100%";

  x.style.width = "100%";

  document.getElementById("1").src="1.jpg"

  document.getElementById("2").src="2.jpg"

  document.getElementById("3").src="3.jpg"

}

</script>

</body>

</html>

If you found this answer helpful please give a thumbs up.


Related Solutions

How do I program the function in JAVASCRIPT? __init_slideshow(images) function init_slideshow(image_urls, dom, automatic, delay) Param Type...
How do I program the function in JAVASCRIPT? __init_slideshow(images) function init_slideshow(image_urls, dom, automatic, delay) Param Type Default Description image_urls Array Array of images to display in the slideshow dom Image element in which to display one image at a time automatic Boolean false If true, the slideshow will advance automatically. Every image is displayed after the given delay. If false, the slideshow will advance manually. To do so, call the returned function. delay Integer 3000 Delay (in milliseconds) for the...
Using JavaScript You must submit a file called, called pass.js pass.js: Validator of passwords Your task...
Using JavaScript You must submit a file called, called pass.js pass.js: Validator of passwords Your task this week will be to program a valid password validator. A password is safe only if it satisfies the following constraints: - It has from 5 to 10 characters (inclusive) - It contains at least one lowercase letter, at least one capital letter and at least one number - The first character is different from the last Once the password is entered and validated,...
Your primary task for this exercise is to complete header file by writing three functions with...
Your primary task for this exercise is to complete header file by writing three functions with its description below: removeAt function – to remove the item from the list at the position specified by location. Because the list elements are in no particular order (unsorted list), you could simple remove the element by swapping the last element of the list with the item to be removed and reducing the length of the list. insertAt function - to insert an item...
How do we return the datatype of arguments without using type of in javascript
How do we return the datatype of arguments without using type of in javascript
JavaScript Create a welcome message on your webpage using three variables At least two of the...
JavaScript Create a welcome message on your webpage using three variables At least two of the variables should be concatenated together Use document.write to add a statement about what is your favorite past time? Format the HTML document appropriately with a title, and the correct HTML structure to hold the JavaScript Create an array to share what your favorite color is. The array must have at least three values and be called via the index value Correctly link the JavaScript...
Using the string functions below, write new functions to do the following, and test them in...
Using the string functions below, write new functions to do the following, and test them in your main() function: Determine whether the first or last characters in the string are any of the characters a, b, c, d, or e. Reverse a string Determine whether a string is a palindrome (spelled the same way forward or backward FUNCTIONS REFERENCE: string myString = "hello"; // say we have a string… // … we can call any of the following // string...
System calls pass parameters to the kernel using one of three methods: in registers, in a...
System calls pass parameters to the kernel using one of three methods: in registers, in a block or table and the address of the block passed as parameter in a register, on the stack. Discuss the advantages and disadvantages of each. Also, what does it mean when we say “a program is a passive entity while a process is an active entity”? Also, in detail why does the Operating System switches the process from Running state to Waiting state when...
How do you write JavaScript codes to randomly select five elements by using a single for-loop?...
How do you write JavaScript codes to randomly select five elements by using a single for-loop? How do you display the results to a html page? var password = [“x”, “y”, “z”, “1”, “2”, “3”, “test”]; Sample output: zx21y
Write three functions that compute the square root of an argument x using three different methods....
Write three functions that compute the square root of an argument x using three different methods. The methods are increasingly sophisticated, and increasingly efficient. The square root of a real number x is the value s such that s*s == x. For us, the values will be double precision variables and so may not be perfectly accurate. Also, for us, assume that x is in the range 0.0 to 100.0. You program should have a main() that asks the user...
Do a search on the internet using the terms special functions differential equations
Do a search on the internet using the terms special functions differential equations
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT