[not working] Image Roll Over Script

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>

Which edition are you using? 6th or 7th edition, or something earlier?

It seems from the code that you’ve posted that you are missing a function that defines addEvent().

I’m using the 7th edition. Ah! I thought this was somehow built in and addEvent was already predefined? How would I find out how to go about this the proper way?

The proper way is to get the jsb-global.js script from the Content folder of the cdrom that comes with the book. See http://au.wiley.com/WileyCDA/WileyTitle/productCd-0470526912,descCd-ERRATA.html

I just read the errata. I was hoping I didn’t have to go through that hassle of returning the book (if they even let me) for a working cd. This is why I can’t compare any examples located on the cd w/ the code in the book. Anyways, I searched a little and found the function addEvent if anyone happens to find themselves in a similar situation. Thank you.


//jsb-global.js
function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}