1. Create a webpage that contains a table with five columns and five rows. 2. Th
ID: 3865070 • Letter: 1
Question
1. Create a webpage that contains a table with five columns and five rows.
2. The first row will contain a heading that spans across all columns. This heading must ask the user to click on it.
3. On click of the above heading display a message box that informs the user to click on any image of their choice on your webpage in order to enlarge it. Ideally your enlarged images will have a significant size, usually, atleast 200px X 200px.
4. The second row will contain five images. Use the thumbnail(smaller) images of your favorite St.Patrick's day costumes. (Nothing too scary)
(See Creating Square Thumbnails section below)
5. The third row will contain one cell that spans all columns, that contains an image of you (not a random cartoon image) that is 800px by 800px. (Specify the size in the element)
i. Note: In part b, this image will be replaced when the user clicks on a smaller image from row two.
6. The fourth row will contain one cell that spans all columns. It contains a heading that contains your name.
Note: This field will change in part b, every time a new image is loaded.
7. The fifth row will contain a link to a new page named StPatricks_Costumes.html. This link must be spanned across all columns. Take care to ensure the description is as specified(case sensitive description of the html filename).
Part 2 - Using JavaScript to open an image in the same document
Read the entire problem and write the pseudo code before you start.
Use Firefox
Write JavaScript code so that each thumbnail image in the table opens the larger original image (that you chose) in the cell in row three of the table when the thumbnail is clicked. Also when the picture loads, change the text in the fourth row to text that describes the image.
E.g., clicking on dog_thumb.png should cause dog.png to open in the third row of the table as an 800px by 800px image replacing the image that was previously there.
ii.Note:
Save the assignment in your All_102Submissions folder
----------------------------------------------------------------------------------------------------------------------------
Part 3 : StPatricks_Costume.html
1. In the StPatricks_Costume.html document, write 2 short paragraphs
i. 1st paragraph: describing your understanding about variables in Javascript ( no images/code only text descriptions are sufficient).
ii.2nd paragraph: describe the significance of St.Patrick's day. If you need to cite your sources, please use MLA style citations.
2. On an onmouseover on the first paragraph make the text in the first paragraph disappear and the text in the second paragraph to turn upside down using a Javascript function.
3. On an onmouseover on the second paragraph make the text in the first paragraph to do something halloweeny using another Javascript function (nothing too scary or gruesome)
4.Add relevant headings with a font size of 32pt, for each of these paragraphs and apply transitions to change the color of your headings to any color of your choice when a user hovers over each one of them.
5.Add a background image of your choice to this page pertaining to the subject described in the second paragraph.
6.At the end of the page add a label with your name displayed on the right side of the page with a certain degree of translucence. It just should not be opaque.
Apply Style to you table.
Explanation / Answer
<html>
<head>
<title> Image Enlarger </title>
<script type="text/javascript">
function showMessage() {
alert ("Tip : Click on any image of their choice on your webpage in order to enlarge it")
}
function showImage(imageName, caption) {
document.getElementById("largeObject").src= imageName;
document.getElementById("captionText").textContent = caption;
}
</script>
</head>
<body>
<div class = "container">
<table border="5" bordercolor="red" align="center">
<tr>
<td colspan = '5' align="center"><a href="#">Click To Know More</a></td>
</tr>
<tr>
<td>
<a href="#">
<img id ="img1" src="patrick-thumb-1.jpeg" alt="costume-1" border=3 height=200px width=200px>
</a>
</td>
<td>
<a href="#">
<img id ="img2" src="patrick-thumb-2.jpeg" alt="costume-2" border=3 height=200px width=200px>
</a>
</td>
<td>
<a href="#">
<img id ="img3" src="patrick-thumb-3.jpeg" alt="costume-3" border=3 height=200px width=200px>
</a>
</td>
<td>
<a href="#">
<img id ="img3" src="patrick-thumb-4.jpeg" alt="costume-4" border=3 height=200px width=200px>
</a>
</td>
<td>
<a href="#">
<img id ="img3" src="patrick-thumb-5.jpeg" alt="costume-5" border=3 height=200px width=200px>
</a>
</td>
</tr>
<tr>
<td colspan = '5' align ="center">
<img id="largeObject" src="my-photo-default.jpg" alt="costume-0" border=3 height=800px width=100%>
</td>
</tr>
<tr>
<td colspan = '5' align="center"><p id="captionText"><b>Zubair</b></p></td>
</tr>
<tr>
<td colspan = '5' align="center"><a href="StPatricks_Costumes.html"> Know more about St. Patrick's Costumes </td>
</tr>
</table>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------
StPatricks_Costumes.html
------------------------------------------------------------------------------------------------
<html>
<head>
<title>
St. Patrick's Costumes
</title>
<style>
div.divOne p:hover { color: white; }
div.divTwo p:hover { color: white; }
</style>
</head>
<div class = "divOne" id="divOne" >
<p align="justify">
<b > Java Variables</b><br><br>
One of the most fundamental characteristics of a programming language is the set of data types it supports.
These are the type of values that can be represented and manipulated in a programming language. Like many
other programming languages, JavaScript has variables. Variables can be thought of as named containers.
You can place data into these containers and then refer to the data simply by naming the container.
</p>
</div>
<br><br>
<div class="divTwo" id="divTwo">
<p align="justify">
<b> Patrick's Day</b><br><br>
Patrick was a 5th-century Romano-British Christian missionary and bishop in Ireland. Much of what is
known about Saint Patrick comes from the Declaration, which was allegedly written by Patrick himself.
It is believed that he was born in Roman Britain in the fourth century, into a wealthy Romano-British
family. His father was a deacon and his grandfather was a priest in the Christian church. According to
the Declaration, at the age of sixteen, he was kidnapped by Irish raiders and taken as a slave to Gaelic
Ireland.[13] It says that he spent six years there working as a shepherd and that during this time he
"found God". The Declaration says that God told Patrick to flee to the coast, where a ship would be waiting
to take him home. After making his way home, Patrick went on to become a priest.
</p>
</div>
<script type="text/javascript">
var i=0, j=0;
var globalDivID;
var rotate;
function spin(divID) {
console.log(divID);
if(divID === "divTwo") {
j= j + (-180);
document.getElementById(divID).style.WebkitTransform = "rotate("+ j +"deg)";
document.getElementById(divID).style.MozTransform = "rotate("+ j +"deg)";
document.getElementById(divID).style.OTransform = "rotate("+ j +"deg)";
document.getElementById(divID).style.Transform = "rotate("+ j +"deg)";
}
}
function spinContinously(divID) {
i = 180;
globalDivID = divID;
rotate = setInterval("spinInterval()",100);
}
function spinInterval() {
document.getElementById(globalDivID).style.WebkitTransform = "rotate("+ i +"deg)";
document.getElementById(globalDivID).style.MozTransform = "rotate("+ i +"deg)";
document.getElementById(globalDivID).style.OTransform = "rotate("+ i +"deg)";
document.getElementById(globalDivID).style.Transform = "rotate("+ i +"deg)";
i = i + 45;
if(i>360) {
clearInterval(rotate);
}
}
</script>
<div>
</div>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.