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 1 year ago
Next > < Previous

Related Solutions

Part 1: Image effects Your first task is to write two functions that manipulate digital images....
Part 1: Image effects Your first task is to write two functions that manipulate digital images.      You will write two functions that take an image object, create a copy, perform a pixel-by-pixel manipulation, and return the manipulated copy. We have provided three helper functions (open_image, display_image, and save_image) that you can use to test your code. You may write any additional helper functions that you find useful. Below there are descriptions and sample images for each of the required...
Activity 11: JS-Loops and Functions Task 1: Use JavaScript for loop to print the first 5...
Activity 11: JS-Loops and Functions Task 1: Use JavaScript for loop to print the first 5 non-zero integers on each line. Task 2: Use JavaScript while loop to print the first 5 non-zero integers on each line. Task 3: Use JavaScript for loop to print the first 5 even integers on each line. Task 4: Write a JavaScript function to multiple two numbers and return the result. Task 5: Write a JavaScript factorial that asks users to enter a positive...
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!
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript or Bootstrap. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to...
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,...
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...
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
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:...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT