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.

venereology answered 10 months ago
Next > < Previous

Related Solutions

Use a JavaScript program to: Stimulate a coin tossing environment using random functions and using a...
Use a JavaScript program to: Stimulate a coin tossing environment using random functions and using a for loop - toss the coin 100 times and print the number of heads and tails. A detailed answer would be appreciated, I would like to learn from it rather than just know the answer. Thanks in advance!
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...
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...
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,...
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
TASK: Using stack functions, write a program in C++ language that acts as a simple calculator,...
TASK: Using stack functions, write a program in C++ language that acts as a simple calculator, reading an infix algebraic expression with numbers and simple operations: +, -, *, / , (, and ). The program converts an infix expression into an equivalent postfix expression, and then evaluates the postfix expression, and then prints the result if input expression is correct otherwise prints error messages. Your program must interact with the user until the user quits.    REQUIREMENTS: - Your...
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...
22.8 LAB 5 D FALL 19 : Using math functions This lab problem demonstrates the use...
22.8 LAB 5 D FALL 19 : Using math functions This lab problem demonstrates the use of import module. The Python programming language has many strengths, but one of its best is the availability to use many existing modules for various tasks, and you do not need to be an experienced computer programmer to start using these modules. We have given you some incomplete code; note that the very first line of that code contains an import statement as follows:...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT