1. The document must have a paragraph of at least 10 lines of text that describe you. This paragraph must be centered on the page and have space for 20 characters per line only. A light-gray image of yourself must be superimposed over the center of the text as a nested element. Modify this document to add four buttons labeled, respectively, Northwest, Northeast, Southwest, and Southeast. When they're pressed, the buttons must move your image to the specified corner of the text. Initially, your image must appear in the northwest (upper-left) corner of the text. (two files)2. Modify the document described in the previous exercise, using different file names, to make the buttons toggle their respective copies of your image on and off so that, at any time, the document may include none, one, two, three, or four copies of your image. The initial document should have no images shown. (two files)

Question
Asked Dec 21, 2019
166 views

1. The document must have a paragraph of at least 10 lines of text that describe you. This paragraph must be centered on the page and have space for 20 characters per line only. A light-gray image of yourself must be superimposed over the center of the text as a nested element. Modify this document to add four buttons labeled, respectively, Northwest, Northeast, Southwest, and Southeast. When they're pressed, the buttons must move your image to the specified corner of the text. Initially, your image must appear in the northwest (upper-left) corner of the text. (two files)
2. Modify the document described in the previous exercise, using different file names, to make the buttons toggle their respective copies of your image on and off so that, at any time, the document may include none, one, two, three, or four copies of your image. The initial document should have no images shown. (two files)

check_circle

Expert Answer

Step 1

Note: As per our honor code, we only answer a question at a time. Please post the second question again so that we can help you.  

Below is the HTML and CSS code (HTML and CSS code are written on two different files and working of each tag is defined as comments):

Html code:

<!--html section - begin-->

<html>

<!--Head section - begin-->

<head>

                <link rel="stylesheet" type="text/css" href="mycss.css">

<!--JavaScript code-->

<script>

/* defining four functions for four directions - begin */

/* setting the image at the corner for each direction */

function north_West(){

document.getElementById("gray-color-image").style.left='-200px';

document.getElementById("gray-color-image").style.top='0px';

}

function north_East(){

document.getElementById("gray-color-image").style.left='170px';

document.getElementById("gray-color-image").style.top='0px';

}

function south_East(){

document.getElementById("gray-color-image").style.left='170px';

document.getElementById("gray-color-image").style.top='400px';

}

function south_West(){

document.getElementById("gray-color-image").style.left='-200px';

document.getElementById("gray-color-image").style.top='400px';

 

}

/* defining four functions for four directions - end */

</script>

<!--head section -end-->

</head>

<!--body section - begin-- >

<body>

<!--paragraph tag - begin-->

<p class="class1">

<!--image inserted-->

<img src="gray-color-image.jpg" id="gray-color-image"/>

<!--writing the paragraph-->

This is a paragraph.<br><!--br tag is used to break-->This is a paragraph.<br><!--br tag is used to break-->

This is a paragraph.<br><!--br tag is used to break-->This is a paragraph.<br><!--br tag is used to break-->

This is a paragraph.<br><!--br tag is used to break-->This is a paragraph.<br><!--br tag is used to break-->

This is a paragraph.<br><!--br tag is used to break-->This is a paragraph.<br><!--br tag is used to break-->

This is a paragraph.<br><!--br tag is used to break-->This is a paragraph.<br><!--br tag is used to break-->

<!--paragraph tag - end-->

</p>

<br><br><br><br><br><br><br><br><br><br><br>

<input type="button" onclick="north_West();"; value="north_West"/>

<input type="button" onclick="south_West();"value="south_West"/>

<input type="button" onclick="south_East();" value="south_East"/>

<input type="button" onclick="north_East();" value="north_East"/>

<!--body section - end-- >

</body>

<!--html section - end-- >

</html>

Step 2

CSS code in mycss.css file:

/*class selector - applied to p tag*/

.class1

{

/*auto margin for left side*/

margin-left: auto;

/*auto margin for right side*/

margin-right: auto;

/*width for class*/

width:1120px;

/* for making paragraph in center */

text-align: center;

/* setting max length */

max-width: 20ch;

 

}

img{

/* setting up the height of image */

height:200px;

...

Want to see the full answer?

See Solution

Check out a sample Q&A here.

Want to see this answer and more?

Solutions are written by subject experts who are available 24/7. Questions are typically answered within 1 hour.*

See Solution
*Response times may vary by subject and question.

Related Computer Science Q&A

Find answers to questions asked by student like you
Show more Q&A
add
question_answer

Q: Write a program with total change amount as an integer input that outputs the change using the fewes...

A: Completing the given C++ program so, that it can follow the given rubrics:Firstly, displaying a mess...

question_answer

Q: When using the Windows Firewall with Advanced Security console, three distinct network locations imp...

A: Windows firewall: It is an essential part of the layered security model provided by the windows, als...

question_answer

Q: Write a Python if expression that evaluates as True if num is an exact multiple of 7.

A: In this question following variables and condition is required to solve :Variables: numCondition: if...

question_answer

Q: Which of the following code is used to check the web worker object is exists or not? If the web work...

A: Code snippet used to check whether the web worker project exists or notThe code snippet that is used...

question_answer

Q: In c++ numbers [4] = {"23", "64", "68", "34" } alphabet [4] = {"a", "b" , "c", "d" } the reason i ne...

A: A array named numbers[4] has 4 integer elements {"23", "64", "68", "34" }.A array named alphabets[4]...

question_answer

Q: Given the following, use a for loop to display the contents of the array (use cout to display):const...

A: The C++ program to display the content of an integer array by using for loop and cout is given below...

question_answer

Q: • How can the RSA algorithm be used to verify the identity of a receiver? In this case, how can the ...

A: To verify the user’s identity:“Digital certificate” is used to verify the identity of the user and t...

question_answer

Q: Suppose two integers num1 and num2 have previously been defined and assigned values. give a while st...

A: While Loop: The while loop first check the condition, if the condition is true then it executes its ...

question_answer

Q: write a c++ program that sssign numItems' address to numItemsPtr, then print the shown text followed...

A: Program Code: