I’m not sure why this doesn’t work. I’m following an example from the Javascript Bible and I need some help. Since the disc w/ examples included doesn’t work. I can’t compare code written vs the example scripts on the disc. Here’s the code. It doesn’t work at on. The mouseover and out doesn’t do anything.
<html>
<head>
<title>Javascript Roll Over</title>
<script type="text/javascript" src="jsImageRollOver.js"></script>
<script type="text/javascript">
<!--
if (document.images){
// pre-cache all 'off' button images
var offImgArray = new Array();
offImgArray["first"] = new Image(32, 32);
offImgArray["prev"] = new Image(32, 32);
offImgArray["next"] = new Image(32, 32);
offImgArray["last"] = new Image(32, 32);
// off image array -- set 'off' image path for each button
offImgArray["first"].src = "images/firstoff.png";
offImgArray["prev"].src = "images/prevoff.png";
offImgArray["next"].src = "images/nextoff.png";
offImgArray["last"].src = "images/lastoff.png";
// pre-cache all 'on' button images
var onImgArray = new Array();
onImgArray["first"] = new Image(32, 32);
onImgArray["prev"] = new Image(32, 32);
onImgArray["next"] = new Image(32, 32);
onImgArray["last"] = new Image(32, 32);
// on image array -- set 'on' image path for each button
onImgArray["first"].src = "images/firston.png";
onImgArray["prev"].src = "images/prevon.png";
onImgArray["next"].src = "images/nexton.png";
onImgArray["last"].src = "images/laston.png";
}
// functions that swap images & status bar
function imageOn(imgName){
if (document.images)
{
document.images[imgName].style.cursor = "pointer";
document.images[imgName].src = onImgArray[imgName].src;
}
}
function imageOff(imgName)
{
if (document.images)
{
document.images[imgName].style.cursor = "default";
document.images[imgName].src = offImgArray[imgName].src;
}
}
function setMsg(msg)
{
window.status = msg;
return true;
}
// controller functions (disabled)
function goFirst()
{
}
function goPrev()
{
}
function goNext()
{
}
function goLast()
{
}
// event handler assignments
function init()
{
if (document.getElementById)
{
oImageFirst = document.getElementById("first");
oImagePrev = document.getElementById("prev");
oImageNext = document.getElementById("next");
oImageLast = document.getElementById("last");
}
else
{
oImageFirst = document.first;
oImagePrev = document.prev;
oImageNext = document.next;
oImageLast = document.last;
}
addEvent(oImageFirst, 'click', goFirst);
addEvent(oImageFirst, 'mouseover', function()
{
imageOn("first");
return setMsg("Go to first picture");
});
addEvent(oImageFirst, 'mouseout', function()
{
imageOff("first");
return setMsg("");
});
addEvent(oImagePrev, 'click', goPrev);
addEvent(oImagePrev, 'mouseover', function()
{
imageOn("prev");
return setMsg("Go to prev picture");
});
addEvent(oImagePrev, 'mouseout', function()
{
imageOff("prev");
return setMsg("");
});
addEvent(oImageNext, 'click', goNext);
addEvent(oImageNext, 'mouseover', function()
{
imageOn("next");
return setMsg("Go to next picture");
});
addEvent(oImageNext, 'mouseout', function()
{
imageOff("next");
return setMsg("");
});
addEvent(oImageLast, 'click', goLast);
addEvent(oImageLast, 'mouseover', function()
{
imageOn("last");
return setMsg("Go to last picture");
});
addEvent(oImageLast, 'mouseout', function()
{
imageOff("last");
return setMsg("");
});
}
// initialize when the page has loaded
addEvent(window, "load", init);
-->
</script>
</head>
<body>
<h1>Slide Show Controls</h1>
<div id="controller">
<img src="images/firstoff.png" name="first" id="first" />
<img src="images/prevoff.png" name="prev" id="prev" />
<img src="images/nextoff.png" name="next" id="next" />
<img src="images/lastoff.png" name="last" id="last" />
</div>
</body>
</html>