01 - Open handout4.htm and examine the source code. Note the three images in the

ID: 3735706 • Letter: 0

Question

01 - Open handout4.htm and examine the source code. Note the three images in the <body> section and then examine their CSS properties, particularly for top and left position, visibility and z-index values. Watch the included video to see how the end result should work. Also examine the height and width properties of the included images. Also note the four arrays included in the script section, which each have 275 cells.

02 - In the <script> section, create a function called moveBall() which accepts two input parameters of left and top. Using the techniques shown in class, assign the input parameters to the top and left values of the image with the id of "ball1". (Hint: Use the getElementById method to assign this and remember to add the "px" string when assigning CSS values.) Next create a second function called sizeSign() which accepts two input parameters of height and width. Using the techniques shown in class, assign the input parameters to the height and width values of the image with the id of "homerun".

03 - Still inside the <script> section, create two global variables called timer and cycle. Set cycle to the initial value of 0. Next create a function called runit(), which has no input parameters. Inside this function, create an if/else structure with four parts. For the first section, test if cycle is less than 200. If this is true, run the moveBall function, using the leftball and topball array values which correspond to the current cycle. For the second section, test if cycle is equal to 200. If this is true, change the CSS visibility of "ball1" to hidden and change the CSS visibility attribute of "homerun" to visible. For the third section, test if cycle is less than 275. If this is true, run the sizeSign function, using the heightsize and widthsize array values which correspond to the current cycle. Last, check if cycle is equal to 275. If this is true, run the clearInterval command on the timer variable. Outside of the if/else structure, increment the cycle variable by one, then close the function.

04 - Finally, create a function called batterup() with no input parameters which is called when button1 is clicked. This function should use the setInterval command to force the runit() command to execute every 50 milliseconds. Set this command equal to the timer variable so that the clearInterval function in step 3 can stop it using the clearInterval command.

******_____________________________________________________________________________________________________*******

So far I had this; please help me. I can't figure the rest of the instructions to where the ball goes to a homerun.

<title>Handout 4</title>

body { background-color: blue; }

#ballfield { position: absolute;

top: 0px;

left: 0px;

margin-left: 150px;

margin-top: 10px;

z-index: -1;}

#ball1 { position: absolute;

top: 365px;

left: 423px;

z-index: 2;

visibility: visible;}

#homerun { position: absolute;

top: 200px;

left: 150px;

z-index: 3;

visibility: hidden;

height: 1px;

width: 1px;}

#button1 { position: absolute;

left: 15px;

top: 30px; }

</style>

var leftball = new Array(423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 421, 419, 418, 416, 414, 413, 411, 409, 407, 406, 404, 402, 401, 399, 397, 395, 394, 392, 390, 389, 387, 385, 383, 382, 380, 378, 377, 375, 373, 371, 370, 368, 366, 365, 363, 361, 359, 358, 356, 354, 353, 351, 349, 347, 346, 344, 342, 341, 339, 337, 335, 334, 332, 330, 329, 327, 325, 323, 322, 320, 318, 317, 315, 313, 311, 310, 308, 306, 305, 303, 301, 299, 298, 296, 294, 293, 291, 289, 287, 286, 284, 282, 281, 279, 277, 275, 274, 272, 270, 269, 267, 265, 263, 262, 260, 258, 257, 255, 253, 251, 250, 248, 246, 245, 243, 241, 239, 238, 236, 234, 233, 231, 229, 227, 226, 224, 222, 221, 219, 217, 215, 214, 212, 210, 208, 207, 205, 203, 202, 200);

var topball = new Array(365, 367, 369, 371, 373, 375, 377, 379, 381, 383, 385, 387, 389, 391, 393, 395, 397, 399, 401, 403, 405, 407, 409, 411, 413, 415, 417, 419, 421, 423, 425, 427, 429, 431, 433, 435, 437, 439, 441, 443, 445, 447, 449, 451, 453, 455, 457, 459, 461, 463, 465, 467, 469, 471, 473, 475, 477, 479, 481, 483, 485, 487, 489, 491, 493, 495, 497, 499, 501, 503, 500, 496, 492, 487, 483, 479, 475, 471, 466, 462, 458, 454, 450, 445, 441, 437, 433, 429, 425, 420, 416, 412, 408, 404, 399, 395, 391, 387, 383, 379, 374, 370, 366, 362, 358, 353, 349, 345, 341, 337, 333, 328, 324, 320, 316, 312, 307, 303, 299, 295, 291, 286, 282, 278, 274, 270, 266, 261, 257, 253, 249, 245, 240, 236, 232, 228, 224, 220, 215, 211, 207, 203, 199, 194, 190, 186, 182, 178, 173, 169, 165, 161, 157, 153, 148, 144, 140, 136, 132, 127, 123, 119, 115, 111, 107, 102, 98, 94, 90, 86, 81, 77, 73, 69, 65, 61, 56, 52, 48, 44, 40, 35, 31, 27, 23, 19, 14, 10, 6, 2, -2, -6, -11, -15, -19, -23, -27, -32, -36, -40);

var widthsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9, 17, 25, 33, 41, 49, 57, 65, 73, 81, 89, 97, 105, 113, 121, 129, 137, 145, 153, 161, 169, 177, 185, 193, 201, 209, 217, 225, 233, 241, 249, 257, 265, 273, 281, 289, 297, 305, 313, 321, 329, 337, 345, 353, 361, 369, 377, 385, 393, 401, 409, 417, 425, 433, 441, 449, 457, 465, 473, 481, 489, 497, 505, 512, 520, 528, 536, 544, 552, 560, 568, 576, 584, 592, 600);

var heightsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 6, 9, 11, 14, 17, 19, 22, 25, 27, 30, 32, 35, 38, 40, 43, 46, 48, 51, 54, 56, 59, 62, 64, 67, 70, 72, 75, 78, 80, 83, 86, 88, 91, 94, 96, 99, 101, 104, 107, 109, 112, 115, 117, 120, 123, 125, 128, 131, 133, 136, 139, 141, 144, 147, 149, 152, 155, 157, 160, 163, 165, 168, 170, 173, 176, 178, 181, 184, 186, 189, 192, 194, 197, 200);

</script>

</head>

<body>

</body>

</html>

*****

was also given:

baseball.gif

baseballfield.jpg

homerun.gif

*****

Explanation / Answer

Code:

<html>

<head>

<title>Handout 4</title>

body { background-color: blue; }

/*Start: Styles for images*/

#ballfield {

position: absolute;

top: 0px;

left: 0px;

margin-left: 150px;

margin-top: 10px;

z-index: -1;

}

#ball1 {

position: absolute;

top: 365px;

left: 423px;

z-index: 2;

visibility: visible;

}

#homerun {

position: absolute;

top: 200px;

left: 150px;

z-index: 3;

visibility: hidden;

height: 1px;

width: 1px;

}

/*End: Styles for images*/

#button1 {

position: absolute;

left: 15px;

top: 30px;

}

</style>

// Function to move ball1 to left and top position

function moveBall(top, left){

var ball1 = document.getElementById("ball1");

ball1.style.left = left + "px";

ball1.style.top = top + "px";

}

function sizeSign(height, width) {

var homerun = document.getElementById("homerun");

homerun.style.height = height + "px";

homerun.style.width = width + "px";

}

var timer, cycle =0;

function runit(){

if(cycle < 200){

//run the moveBall function, using the leftball and topball array values which correspond to the current cycle

moveBall(topball[cycle],leftball[cycle]);

}else if(cycle == 200){

//change the CSS visibility of "ball1" to hidden and change the CSS visibility attribute of "homerun" to visible

var ball1 = document.getElementById("ball1");

ball1.style.visibility = false;

var homerun = document.getElementById("homerun");

homerun.style.visibility = true;

}else if(cycle< 275){

sizeSign(heightsize[cycle],widthsize[cycle]); //run the sizeSign function, using the heightsize and widthsize array values which correspond to the current cycle

}else if(cycle == 275){

clearInterval(timer); //clearInterval command on the timer variable.

}

cycle++; //increment the cycle variable by one

}

function batterup(){

timer = setInterval(runit, 50);

}

</script>

</head>

<body>

</body>

</html>

Navigate

01 (8 points) Answer with \"True\" or \"False (a) (b) In demand paging pages are

01 - Understanding the Financial Planning Process Problems: Chapter 01 - Underst

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

01 - Open handout4.htm and examine the source code. Note the three images in the

Question

Explanation / Answer

Related Questions

Navigate