1. Build a web site with for three pages. The narrative should describe which th
ID: 3660418 • Letter: 1
Question
1. Build a web site with for three pages. The narrative should describe which three pages are fully functioning, and how to navigate to them.
3. The site must contain a mouseover-triggered content change that newly displays on the screen a paragraph or paragraphs of not less than 150 words, replacing some other existing content.
4. The site should contain a slideshow of three images. Each image is a cache.
5. One page of the site should contain a text field that accepts a 'visitor login number (VLN)'. Content of the field should be validated onblur. Validation requires 7 digits (1234567) or the proper combination of digits and dashes (12-34-567). If 7 digits are provided insert the dashes appropriately after validation. If the text box content is not successfully validated remove the contents.
Explanation / Answer
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h1> Home Page</h1>
<a href="para.html">Para Mouse over</a><br>
<a href="slide.html">slide show</a><br>
<a href="validate.html">validate vln</a>
</body>
</html>
para.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<h1> Paragraph mouse over page</h1>
<p id="textpara" >
This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes
</p>
<script>
var initText ="This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes This is a sample paragraph when you move your mouse over it changes";
var newText ="This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph This is new text in paragraph";
function changeNewText() {
document.getElementById("textpara").innerHTML = newText;
}
function changeInitText() {
document.getElementById("textpara").innerHTML = initText;
}
</script>
</body>
</html>
slide.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<h1>image slide show</h1>
<img src="Blue-Swirls.jpg" width="200" height="200" border="0" alt="" id="pic">
<script>
var imagess = ["one.jpg", "two.jpeg", "three.jpg"];
var i =0;
function changePic() {
i++;
if(i == imagess.length)
i=0;
document.getElementById("pic").src = imagess[i];
setTimeout("changePic()",1000)
}
changePic();
</script>
</body>
</html>
validate.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
VLN: <input type="text" name="vln" id="vln">
<script>
function validate() {
var vln = document.getElementById("vln").value;
if(!vln.match(/^[0-9]{7}$/))
document.getElementById("vln").value = "";
else
alert("correct" +vln)
}
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.