SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Location
    California
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [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.

    Code:
    <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>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by CrypticDesigns View Post
    I'm not sure why this doesn't work. I'm following an example from the Javascript Bible and I need some help.
    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().
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Location
    California
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by CrypticDesigns View Post
    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/WileyTi...Cd-ERRATA.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Location
    California
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    //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 );
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •