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. 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 22, 2019
12 views

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. 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

Here is the HTML code given below –

<html>

<head>

<script>

/* functions to get directions */
function north_West_Direction()
{
document.getElementById("copyOfImage").removeAttribute("style");

document.getElementById("copyOfImage").style.left = '0';

document.getElementById("copyOfImage").style.top = '0px';
}

function north_East_Direction()
{
document.getElementById("copyOfImage").removeAttribute("style");

document.getElementById("copyOfImage").style.right = '0px';

document.getElementById("copyOfImage").style.top = '0px';
}

function south_East_Direction()
{

document.getElementById("copyOfImage").removeAttribute("style");

document.getElementById("copyOfImage").style.right = '0px';

document.getElementById("copyOfImage").style.bottom = '0px';
}

function south_West_Direction()
{

document.getElementById("copyOfImage").removeAttribute("style");

document.getElementById("copyOfImage").style.left = '0px';

document.getElementById("copyOfImage").style.bottom = '0px';

}
/* functions to get directions */

/* function to copy image */
function copyOfImage(n)
{

img = document.getElementById("image").getAttribute("src");

str = "";

for(i=0; i<n; i++)
{

str+="<img src='"+img+"'/>";

}

document.getElementById("copyOfImage").innerHTML=str;

}
/* function to copy image */

</script>

<style>


</style>

</head>

<body>

<p class="classOne">

<span id="copyOfImage"></span>

<img src="image-grey-color.jpg" id="image" style="display : none"/>

The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
</p>

<!-- buttons for directions -->
<input type="button" onclick="north_West_Direction();" value="North West" />

<input type="button" onclick="south_West_Direction();" value="South West" />

<input type="button" onclick="south_East_Direction();" value="South East" />

<input type="button" onclick="north_East_Direction();" value="North East" />
<!-- buttons for directions -->

<br> <br>
<!-- buttons to copy image -->
<input type="button" onclick="copyOfImage(0);" value="No Image" />

<input type="button" onclick="copyOfImage(1);" value="One Image" />

<input type="button" onclick="copyOfImage(2);" value="Two Image" />

<input type="button" onclick="copyOfImage(3);" value="Three Image" />

<input type="button" onclick="copyOfImage(4);" value="Four Image" />
<!-- buttons to copy image -->

</body>

</html>

Step 2

Here is a CSS code for an HTML file –

Save this CSS file as used_css.css file name.

/* modify 'p' tag */
.classOne
{

position:relative;

margin-left: auto;

/* margin left for p */
margin-right: auto;

/* width for paragraph */
width: 70em;

/* justify paragraph */
text-align: justify;

}

/* modify 'img' tag*/
img
{...

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.
Tagged in

Engineering

Computer Science

Related Computer Science Q&A

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

Q: Write a c++ program   The above figure represents relationships between different struct variables a...

A: Program:#include&lt;iostream&gt;#include&lt;string&gt; using namespace std; struct Driver{  string N...

question_answer

Q: You are given a class Dog, whose constructor sets the initial values for attributes in the following...

A: Following is the code in python to create a class Dog and setting the initial value for the attribut...

question_answer

Q: Python Coding-While Loops  (In PyCharm Community edition)   Create a while loop that SUMS up ALL the...

A: Prompt user to enter initial numberPrompt user to enter ending numberUsing while loop sums up all th...

question_answer

Q: write a program that asks the user how many times to roll a die. The output should include the total...

A: Program Approach-Import all the essential java packages.Declare a class named Main.Define the main m...

question_answer

Q: The prompt asks me to write a program that asks the user to enter an object’s mass, then calls a fun...

A: Program Algorithm-STARTStep1: Import the essential java packages.Step2: Define the class Main.Step3:...

question_answer

Q: In C++: given the following recursive definition  f(1) = f(2) = 2 f(n) = 2* f(n-1) + f(n-2) write th...

A: Program:#include &lt;iostream&gt;using namespace std; int f(int n){    if ((n == 1) || (n == 2))    ...

question_answer

Q: Write a Python if statement that evaluates as True if variable num is an odd integer.

A: The python program and approach are given below:Approach:Prompts the user to enter an integer and st...

question_answer

Q: Write one Python statement to print variable price in currency format (with commas for thousands).

A: Program:price = 78200000print("\nOriginal Number: ", price)print("Printing in currency format: "+"{:...

question_answer

Q: Is Amazon Web Services an enterprise system?

A:  Enterprise system: An enterprise system is an information system that provides coordination and int...