kobyskid
03-17-2009, 08:09 PM
I am having some problems with a webpage I was required to make for a class. Everything works fine in firefox but the teacher will be looking at it in internet explorer. I am utilizing Internet explorer v.7 but when it comes to doing the slideshow it will transition from image to image fine in firefox but when you click the left arrow in internet explorer it won't change pictures. Here is all my coding.
<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 1
Review Assignment
Monroe Public Library
Author: Kristan Washburn
Date: Jan 15, 2008
Filename: mpl2.htm
Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->
<title>Kristan's Webpage</title>
<script type= "text/javascript" src= "calendarclock.js"> </script>
<link href="indexstyles.css" rel="stylesheet" type="text/css" />
<script>
var tick;
function stop() {
clearTimeout(tick);
}
function simpleClock() {
var ut=new Date();
var h,m,s;
var time=" ";
h=ut.getHours();
m=ut.getMinutes();
s=ut.getSeconds();
if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;
time+=h+":"+m+":"+s;
document.sclock.stime.value=time;
tick=setTimeout("simpleClock()",1000);
}
</script>
</head>
<body>
<BODY onLoad="simpleClock();" onUnload="stop();">
<FORM NAME="sclock">
<p> Time:<INPUT TYPE="text" NAME="stime" SIZE="13"></p>
</FORM>
</head>
<h2>Animal Tracks</h2>
<p id="description">Below you will see a variety of animal tracks found in the snow. These tracks include those of a red fox, snowshoe hare, chickadee, mouse, ruffed grouse, and canadian lynx. See if you can identify which is which.</p>
<p><img name="Photo" id="Photo" src="slide00.jpg" alt="" /></p>
<p>
<a href="Javascript:SlideShow('reverse')" onmouseup= LOut() onmousedown= LIn() >
<img name="LeftArrow" id="LeftArrow" src="lup.gif" alt="" />
</a>
<a href="Javascript:SlideShow('forward')" onmouseup= ROut() onmousedown= RIn()>
<img name="RightArrow" id="RightArrow" src="rup.gif" alt="" />
</a>
<br />
Click the arrows to scroll through a slide show of the different animal tracks.
</p>
</body>
</html>
/* JS for clockpage.htm*/
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
/*JS for calendar*/
function buildCal(m, y, cM, cH, cDW, cD, brdr){
var mn=['January','February','March','April','May','June','July','August','September','October','November',' December'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st
var todaydate=new Date() //DD added
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : ' ';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}
/*JS for slide show*/
var RUp = new Image();
RUp.src= "rup.gif";
var RDown = new Image();
RDown.src = "rdown.gif";
var LUp = new Image();
LUp.src = "lup.gif";
var LDown = new Image();
LDown.src = "ldown.gif";
var Slides=new Array();
Slides[0]=new Image();
Slides[1]=new Image();
Slides[2]=new Image();
Slides[3]=new Image();
Slides[4]=new Image();
Slides[5]=new Image();
Slides[6]=new Image();
Slides[7]=new Image();
Slides[8]=new Image();
Slides[9]=new Image();
Slides[10]=new Image();
Slides[11]=new Image();
Slides[0].src="slide00.jpg";
Slides[1].src="slide01.jpg";
Slides[2].src="slide02.jpg";
Slides[3].src="slide03.jpg";
Slides[4].src="slide04.jpg";
Slides[5].src="slide05.jpg";
Slides[6].src="slide06.jpg";
Slides[7].src="slide07.jpg";
Slides[8].src="slide08.jpg";
Slides[9].src="slide09.jpg";
Slides[10].src="slide10.jpg";
Slides[11].src="slide11.jpg";
function LIn () {
document.images["LeftArrow"].src=LDown.src;
}
function LOut() {
document.images["LeftArrow"].src=LUp.src;
}
function RIn() {
document.images["RightArrow"].src=RDown.src;
}
function ROut() {
document.images("RightArrow").src=RUp.src;
}
var SlideNum = 0;
function TransSlide(direction){
document.images["Photo"].filters[0].motion=direction;
document.images["Photo"].filters[0].apply();
document.images["Photo"].src = Slides[SlideNum].src;
document.images["Photo"].filters[0].play(2);
}
function SlideShow(direction) {
if (direction == "forward") {
SlideNum = (SlideNum == 11) ? 0 : SlideNum+1;
} else {
SlideNum = (SlideNum == 0) ? 11: SlideNum-1;
}
if (document.images["Photo"].filters) {
TransSlide(direction);
}else{
document.images["Photo"].src=Slides[SlideNum].src;
}
}
Thanks for any help in advance.
<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 1
Review Assignment
Monroe Public Library
Author: Kristan Washburn
Date: Jan 15, 2008
Filename: mpl2.htm
Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->
<title>Kristan's Webpage</title>
<script type= "text/javascript" src= "calendarclock.js"> </script>
<link href="indexstyles.css" rel="stylesheet" type="text/css" />
<script>
var tick;
function stop() {
clearTimeout(tick);
}
function simpleClock() {
var ut=new Date();
var h,m,s;
var time=" ";
h=ut.getHours();
m=ut.getMinutes();
s=ut.getSeconds();
if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;
time+=h+":"+m+":"+s;
document.sclock.stime.value=time;
tick=setTimeout("simpleClock()",1000);
}
</script>
</head>
<body>
<BODY onLoad="simpleClock();" onUnload="stop();">
<FORM NAME="sclock">
<p> Time:<INPUT TYPE="text" NAME="stime" SIZE="13"></p>
</FORM>
</head>
<h2>Animal Tracks</h2>
<p id="description">Below you will see a variety of animal tracks found in the snow. These tracks include those of a red fox, snowshoe hare, chickadee, mouse, ruffed grouse, and canadian lynx. See if you can identify which is which.</p>
<p><img name="Photo" id="Photo" src="slide00.jpg" alt="" /></p>
<p>
<a href="Javascript:SlideShow('reverse')" onmouseup= LOut() onmousedown= LIn() >
<img name="LeftArrow" id="LeftArrow" src="lup.gif" alt="" />
</a>
<a href="Javascript:SlideShow('forward')" onmouseup= ROut() onmousedown= RIn()>
<img name="RightArrow" id="RightArrow" src="rup.gif" alt="" />
</a>
<br />
Click the arrows to scroll through a slide show of the different animal tracks.
</p>
</body>
</html>
/* JS for clockpage.htm*/
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
/*JS for calendar*/
function buildCal(m, y, cM, cH, cDW, cD, brdr){
var mn=['January','February','March','April','May','June','July','August','September','October','November',' December'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st
var todaydate=new Date() //DD added
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : ' ';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}
/*JS for slide show*/
var RUp = new Image();
RUp.src= "rup.gif";
var RDown = new Image();
RDown.src = "rdown.gif";
var LUp = new Image();
LUp.src = "lup.gif";
var LDown = new Image();
LDown.src = "ldown.gif";
var Slides=new Array();
Slides[0]=new Image();
Slides[1]=new Image();
Slides[2]=new Image();
Slides[3]=new Image();
Slides[4]=new Image();
Slides[5]=new Image();
Slides[6]=new Image();
Slides[7]=new Image();
Slides[8]=new Image();
Slides[9]=new Image();
Slides[10]=new Image();
Slides[11]=new Image();
Slides[0].src="slide00.jpg";
Slides[1].src="slide01.jpg";
Slides[2].src="slide02.jpg";
Slides[3].src="slide03.jpg";
Slides[4].src="slide04.jpg";
Slides[5].src="slide05.jpg";
Slides[6].src="slide06.jpg";
Slides[7].src="slide07.jpg";
Slides[8].src="slide08.jpg";
Slides[9].src="slide09.jpg";
Slides[10].src="slide10.jpg";
Slides[11].src="slide11.jpg";
function LIn () {
document.images["LeftArrow"].src=LDown.src;
}
function LOut() {
document.images["LeftArrow"].src=LUp.src;
}
function RIn() {
document.images["RightArrow"].src=RDown.src;
}
function ROut() {
document.images("RightArrow").src=RUp.src;
}
var SlideNum = 0;
function TransSlide(direction){
document.images["Photo"].filters[0].motion=direction;
document.images["Photo"].filters[0].apply();
document.images["Photo"].src = Slides[SlideNum].src;
document.images["Photo"].filters[0].play(2);
}
function SlideShow(direction) {
if (direction == "forward") {
SlideNum = (SlideNum == 11) ? 0 : SlideNum+1;
} else {
SlideNum = (SlideNum == 0) ? 11: SlideNum-1;
}
if (document.images["Photo"].filters) {
TransSlide(direction);
}else{
document.images["Photo"].src=Slides[SlideNum].src;
}
}
Thanks for any help in advance.