The quick answer is that you don't have a name attribute on the tag you are trying to reference. Use
document.getElementById I'm not trying to hurt your feelings of course, but your code needs an overhaul. Here are just a few things at first glance that you could do
First, use this as a template for your page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<hta:application
id="PBrowser"
applicationname="PicViewer"
navigable="yes"/>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Next, for all those images at the bottom of your code, you can replace with some simple css
change this:
<img src="pic00" id="Pic0" height="100" OnClick="AddPrev(10)"
onmouseover="document.body.style.cursor='hand'"
onmouseout="document.body.style.cursor='auto'">
<img src="pic01.jpg" id="Pic1" height="100" OnClick="AddPrev(11)"
onmouseover="document.body.style.cursor='hand'"
onmouseout="document.body.style.cursor='auto'">
<img src="pic02.jpg" id="Pic2" height="100" OnClick="AddPrev(12)"
onmouseover="document.body.style.cursor='hand'"
onmouseout="document.body.style.cursor='auto'">
<img src="pic03.jpg" id="Pic3" height="100" OnClick="AddPrev(13)"
onmouseover="document.body.style.cursor='hand'"
onmouseout="document.body.style.cursor='auto'">
<img src="pic04.jpg" id="Pic4" height="100" OnClick="AddPrev(14)"
onmouseover="document.body.style.cursor='hand'"
onmouseout="document.body.style.cursor='auto'">
<img src="pic05.jpg" id="Pic5" height="100" OnClick="AddPrev(15)"
onmouseover="document.body.style.cursor='hand'"
onmouseout="document.body.style.cursor='auto'">
into this:
<img src="pic00.jpg" id="Pic0" OnClick="AddPrev(10)"/>
<img src="pic01.jpg" id="Pic1" OnClick="AddPrev(11)"/>
<img src="pic02.jpg" id="Pic2" OnClick="AddPrev(12)"/>
<img src="pic03.jpg" id="Pic3" OnClick="AddPrev(13)"/>
<img src="pic04.jpg" id="Pic4" OnClick="AddPrev(14)"/>
<img src="pic05.jpg" id="Pic5" OnClick="AddPrev(15)"/>
and put this in the stylesheet:
img{
cursor:hand;
height:100px;
}
You don't need the form tag, get rid of it.
Replace all the name attributes with an id attribute.
In your javascript add this function:
function id(o){return document.getElementById(o)} In your code use that function to find elements instead. For example:
document.all.MyPicture -> id("MyPicture") replace
MyPicture.width with
MyPicture.style.width and do the same for the height attribute
replace
window.onload with
onload replace
window.setInterval("DockToolBar()", 800); with
setInterval(DockToolBar, 800); declare your variables or everything will be a global. instead of just using
foo = "bar", use
var foo = "bar" replace your array:
FileList =[];
FileList[0]='pic00.jpg';
FileList[1]='pic01.jpg';
FileList[2]='pic02.jpg';
FileList[3]='pic03.jpg';
FileList[4]='pic04.jpg';
FileList[5]='pic05.jpg';
with this:
var FileList =['pic00.jpg','pic01.jpg','pic02.jpg','pic03.jpg','pic04.jpg','pic05.jpg']
replace this
PicNum = PicNum + i; with this:
PicNum += i; Take all your event listeners out of the code and move them into the onload event:
replace this
<img src="pic00.jpg" id="Pic0" OnClick="AddPrev(10)"/>
<img src="pic01.jpg" id="Pic1" OnClick="AddPrev(11)"/>
<img src="pic02.jpg" id="Pic2" OnClick="AddPrev(12)"/>
<img src="pic03.jpg" id="Pic3" OnClick="AddPrev(13)"/>
<img src="pic04.jpg" id="Pic4" OnClick="AddPrev(14)"/>
<img src="pic05.jpg" id="Pic5" OnClick="AddPrev(15)"/>
with this:
<img src="pic00.jpg" id="Pic0"/>
<img src="pic01.jpg" id="Pic1"/>
<img src="pic02.jpg" id="Pic2"/>
<img src="pic03.jpg" id="Pic3"/>
<img src="pic04.jpg" id="Pic4"/>
<img src="pic05.jpg" id="Pic5"/>
add this to the script
var Pic0, Pic1, Pic2,Pic3,Pic4,Pic5 onload = function(){
Pic0 = id("Pic0")
Pic1 = id("Pic1")
Pic2 = id("Pic2")
Pic3 = id("Pic3")
Pic4 = id("Pic4")
Pic5 = id("Pic5")
Pic0.onclick = function(){AddPrev(10)}
Pic1.onclick = function(){AddPrev(11)}
Pic2.onclick = function(){AddPrev(12)}
Pic3.onclick = function(){AddPrev(13)}
Pic4.onclick = function(){AddPrev(14)}
Pic5.onclick = function(){AddPrev(15)} ...rest of your code }
do similar to the other tag events. There may be some more but this is a good start I think. Your code will be smaller and easier to manage and read.