以下は、課題の質問です。
課題: このアプリケーションを作成するには、Web ページの右上隅にあるバナー広告ボックスを追加します。広告は、異なる z-index 値で互いに積み重ねられます。別の広告を表示するには、プログラムで z-index 番号を変更し、スタックの一番下を一番上に移動します。アプリケーションを視覚的に面白くするために、Hellen は新しい広告を上から下にスクロールして、現在表示されている広告を置き換えたいと考えています。
私の質問: Web ページの右上隅にバナーを表示できません。
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 8
Case Problem 1
Author:
Date:
Filename: banners.js
Global Variables
nextAd
Used to track the next ad to be displayed in the banner box
Functions
addEvent(object, evName, fnName, cap)
Run the function fnName when the event evName occurs in object.
makeBannerAds()
Create the banner box and stacked collection of banner ads
changeBannerAd()
Change the ad displayed in the banner box by changing the stacking
order of the ads
moveNextAd(top)
Move the nextAd object down top pixels from its current location.
*/
//this is the global scope here when you declare out side of a function it because global or at the top of the js file
var nextAd;
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
/* Add new code below */
var nextAd;
addEvent(window, "load", makeBannerAds, false);
function makeBannerAds() {
var bannerBox = document.createElement("div");
bannerBox.id = "bannerBox";
for (var i = 0; i < num; i++) {
var bannerAd = document.createElement("div");
bannerAd.className = "bannerAd";
bannerAd.style.zIndex = i;
var urlLink = document.createElement("a");
urlLink.href = adsURL[i];
var bannerIndex = document.createElement("img");
bannerIndex.src = "banner" + i + ".jpg";
bannerBox.appendChild(bannerAd);
}
document.body.appendChild(bannerBox);
setInterval("changeBannerAd()", 10000);
}
function changeBannerAd() {
var allAds = document.getElementsByTagName('body')[0].appendChild(bannerBox);
for (var i = 0; i < num; i++) {
if (allAds[i].style.zIndex === 0) {
allAds[i].style.top = "-50px";
nextAd = allAds[i];
}
}
for (var i = 0; i < num; i++) {
allAds[i].style.zIndex--;
if (allAds[i].style.zIndex < 0)
allAds[i].style.zIndex = num - 1;
}
var timeDelay = 0;
for (var i = -50; i <= 0; i++) {
setTimeout("moveNextAd(" + i + ")", timeDelay);
timeDelay += 15;
}
}
function moveNextAd(top) {
nextAd.style.top = top + ".px";
}
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 8
Case Problem 1
Author:
Date:
Filename: ads.js
Global Variables:
adURLs
An array of URL for banner ads
*/
var num = 11;
var adsURL = new Array(num);
for (var i = 0; i < adsURL.length; i++) {
adsURL[i] = "testpage" + i + ".htm";
}/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 8
Case Problem 1
Filename: bannerstyles.css
This file contains styles used for the rotating ad banners
*/
#bannerBox {
position: absolute;
top: 15px;
left: 470px;
z-index: 10;
width: 300px;
height: 60px;
overflow: hidden
}
.bannerAd {
position: absolute;
width: 300px;
height: 60px;
top: 0px;
left: 0px
}
.bannerAd img {
border-width: 0px width: 300px;
height: 60px;
}
/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 8
Case Problem 1
Filename: bw.css
This file contains styles used in the books.htm file.
*/
* {
padding: 0px;
margin: 0px
}
body {
font-size: 12px;
font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
background: white url(leftbar.jpg) repeat-y
}
a {
display: block;
text-decoration: none
}
ul {
list-style-type: none
}
label {
display: block
}
fieldset {
border-width: 0px
}
#page {
position: absolute;
top: 0px;
left: 0px;
width: 750px
}
#heading {
width: 100%;
text-align: left;
border-bottom: 1px solid rgb(102, 51, 0);
margin: 0px;
padding: 0px;
background-color: white
}
#menu {
width: 100%;
margin: 0px;
padding: 0px
}
#menu li {
width: 14%;
text-align: center;
height: 20px;
float: left
}
#menu li a {
color: rgb(102, 51, 0);
background-color: white;
border: 1px solid rgb(102, 51, 0)
}
#menu li a:hover {
color: rgb(255, 255, 153);
background-color: rgb(102, 51, 0)
}
#menu2 {
clear: left;
float: left;
width: 200px;
padding-top: 10px;
margin: 0px 30px 0px 20px
}
#menu2 li {
width: 95%;
text-align: left;
margin-bottom: 3px
}
#menu2 li a {
width: 100%;
color: black
}
#menu2 li a:hover {
text-decoration: underline;
color: rgb(255, 255, 153)
}
#menu2 .newgroup {
margin-top: 20px
}
#main {
float: left;
width: 450px
}
#main a {
display: inline;
text-decoration: underline;
color: rgb(116, 95, 88)
}
#main h2 {
font-size: 20px;
color: rgb(102, 51, 0);
margin-top: 10px;
font-weight: normal;
letter-spacing: 5px
}
#main p {
margin: 10px 0px 10px 20px
}
#signature {
text-align: right;
line-height: 0.8
}<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 8
Case Problem 1
Online Bookworms Home Page
Author:
Date:
Filename: books.htm
Supporting files: ads.js, banner0.jpg - banner10.jpg, banners.js,
bannerstyles.css, bw.css, bwlogo.jpg,
signature.jpg, testpage0.htm - testpage10.htm
-->
<title>Online Bookworms</title>
<link href="bw.css" rel="stylesheet" type="text/css" />
<link href="bannerstyles.css" rel="stylesheet" type="text/css" />
<script src="ads.js" type="text/javascript"></script>
<script src="banner.js" type="text/javascript"></script>
<head>
<!--
-->
<title>Online Bookworms</title>
<link href="bw.css" rel="stylesheet" type="text/css" />
<link href="bannerstyles.css" rel="stylesheet" type="text/css" />
<script src="ads.js" type="text/javascript"></script>
<!--calls the external file called slideshow.js -->
<script src="banners.js" type="text/javascript"></script>
<!--calls the external file called slideshow.js -->
</head>
<body>
<div id="page">
<h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" />
<script type="text/javascript>
storeURL();
</script>
</h1>
<ul id="menu">
<li><a href="#">Home</a>
</li>
<li><a href="#">Reviews</a>
</li>
<li><a href="#">Forums</a>
</li>
<li><a href="#">Book Swaps</a>
</li>
<li><a href="#">OBW Store</a>
</li>
<li><a href="#">Author's Corner</a>
</li>
<li><a href="#">My Account</a>
</li>
</ul>
<ul id="menu2">
<li><a href="#">My Reading List</a>
</li>
<li><a href="#">Review a Book</a>
</li>
<li><a href="#">Join a Discussion</a>
</li>
<li><a href="#">Post to a Forum</a>
</li>
<li><a href="#">My Mail</a>
</li>
<li><a href="#">My Posts</a>
</li>
<li class="newgroup"><a href="#">Reading Recommendations</a>
</li>
<li><a href="#">Books of the Month</a>
</li>
<li class="newgroup"><a href="#">MP3 Downloads</a>
</li>
<li><a href="#">Podcast</a>
</li>
<li><a href="#">RSS Feeds</a>
</li>
<li class="newgroup"><a href="#">Tech Support</a>
</li>
<li><a href="#">Comments</a>
</li>
<li><a href="#">About online BookWorms</a>
</li>
</ul>
<div id="main">
<h2>Welcome</h2>
<p>Welcome to <strong>online BookWorms</strong> — your location on the Web for books, magazines, short stories, poetry, and essays. Please explore our online bookstore for the lowest prices on new and rare books. Share your love of reading by
joining one of our many forums and discussion groups. Are you an aspiring critic? We welcome book reviews and essays on your favorite authors and works.
</p>
<h2>News</h2>
<p>We are very happy to introduce the <a href="#">online BookWorms
Podcast</a>. The podcast will contain free excerpts from great works of fiction and reviews of current books. You can quickly subscribe to this new BookWorms feature <a href="#">here</a>.
</p>
<p>Take a few moments now to explore our book shelves. And remember to patronize our sponsors by clicking the banner ads at the top of the page. Enjoy browsing our site!
<p id="signature">
<img src="signature.jpg" alt="Helen Ungerstatz" />
</p>
</div>
</div>
</body>
</html>