Use the three image techniques in the same file: Code for cycling banner: <html>

ID: 3774471 • Letter: U

Question

Use the three image techniques in the same file:

Code for cycling banner:

<html>
<head>
<title>HTML and JavaScript</title>
<script>
var imgArray = new Array(4);
var index = 0;

function cycle()
{
document.banner.src = imgArray[index].src;
index++;
if (index > 3)
{
index = 0;
}
setTimeout("cycle()",2000);
return;
}

function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
cycle();
return;
}
</script>
</head>

Code for random image display:

<html>

<head>
<title>HTML and JavaScript</title>
<script>
var imgArray = new Array(4);
var index = 0;

function select()
{
index = Math.floor(Math.random() * 4);
document.banner.src = imgArray[index].src;
setTimeout("select()",2000);
return;
}

Code for Slide Show:

<html>
<head>
<title>HTML and JavaScript</title>
<script>
var imgArray = new Array(4);
var index = 0;

function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}

<body>
<div align="center">
<h2>My JavaScript Slide Show</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="#">Back</a>
   
<a href="#">Next</a>
</p>
</div>
</body>
</html>

CAPSTONE SIMULATION In this lesson, you learned many valuable JavaScript skills that Web page. If you want, you can use all three techniques together allow you to create cycling banners. random image displays, and Demonstrate that you have mastered all of the concepts presented in this lesson by creating a Web page that uses all three of these electronic slide shows. You should recognize, however, that these techniques are not mutually exclusive. In other words, you do not JavaScript image techniques. When you are finished, your Web necessarily have to choose only one of these techniques for a given page should look similar to Figure 7-15 HM it x bates Ele Ed. LIONS LIONS My JavaScript Slide Show LIONS kass Nat FIGURE 7-15 Web page containing three image display techniques Project Requirements: Use the same image files you used in Step-by-Steps 7.3. 7.4, Create a slide show in the lower third of your Web page and 7.5 Usc different namcs for your two banner imagcs Create a cycling bunner in the upper third of your Web page Use different names for your thrce array index variablcs. Create a random image display in the middle third of your Name your resulting Web page capstone-7.html or Web page capstone-7.htm

Explanation / Answer

<html>
<head>
<title>HTML and JavaScript</title>
<script>
var imgArray = new Array(4);
var index = 0;

//code for cycle image start
function cycle()
{
document.banner.src = imgArray[index].src;
index++;
if (index > 3)
{
index = 0;
}
setTimeout("cycle()",2000);
return;
}
//code for cycle image End

//code for select image start
function select()
{
index = Math.floor(Math.random() * 4);
document.banner1.src = imgArray[index].src;
setTimeout("select()",2000);
return;
}
//code for select image End

//code for slide show image start
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
//code for slide show image End

//get image sorce from dynamically
function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lion.jpg";
imgArray[1] = new Image;
imgArray[1].src = "tiger.jpg";
imgArray[2] = new Image;
imgArray[2].src = "bear.jpg";
imgArray[3] = new Image;
imgArray[3].src = "leopard.jpg";
cycle();
select();
return;
}

</script>
</head>
<body>

<div align="center">
<img name="banner" src="lion.gif" width="500" height="300">
</div>

<br>

<div align="center">
<img name="banner1" src="lion.gif" width="500" height="300">
</div>




<div align="center">
<h2>My JavaScript Slide Show</h2>
<p>
<img name="slideshow" src="lion.jpg" width="500" height="300">
</p>
<p>
<a href="#">Back</a>
   
<a href="#">Next</a>
</p>
</div>

</body></html>

Navigate

Use the three header files and the following two implementation programs, hourly

Use the three micro satellite gels below to analyze a population of 72 individua

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

Use the three image techniques in the same file: Code for cycling banner: <html>

Question

Explanation / Answer

Related Questions

Navigate