onload - addonload error - newbie college student asking for help!

Chezshire · May 1, 2010

Hi - I'm a complete newb to javascript and I have what I think is a javascript crash between two portions of my script.

I am trying to get several image scripts to work together. The problem is that two are conflicting and I can't figure out the conflict. I've run the files through firebug, and firefox's error consol and i get no errors so I'm very lost and could really use some help (any help is greatly appreciated).

The specific error occurs when you click the previous or next links located under the thumbnail image. What should happen is that when you click either link, depending on the link you click either the previous or the next image should display but it doesn't. Instead the alt text does And if you try to click the other link to go back to the prior the old image doesn't reload.

I believe that the function for the roll over buttons is conflicting with that of previous/next function (initLinks) but i don't understand how or why.

I have broken the file down to a small test file located here where the problem can easily be seen

Isolated Problemhttp://www.xdesignworks.com/SCC/web150/wk04a2crash_Lab.html

This is the final final i'm trying to get work.

Please help me - i've been on this all morning (i thought i'd resolved it last night but i was mistaken )

Final final

http://xdesignworks.com/SCC/web150/wk04_1.6e.html

here is all the code for the test file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web 150 | Wk 4 Lab</title>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<script type="text/javascript" src="_js/util.js" ></script><!-- utility file -->
	<link rel="stylesheet" type="text/css" href="_css/stylesFromBill.css" /><!-- stylesheet reference -->
<style type="text/css">
	/* embedded style rules could go here */
</style>


<script type="text/javascript">
//window.onload = initLinks;
//window.onload = choosePic;
//window.onload = choosePic;

addOnload(initLinks);


var myimages = new Array();
var imgpath = "_images/";
function preload()
{//no 'alias' for the arguments is declared
	if(document.images)
		{//check to be sure the images[] array is supported
		for (x=0; x<preload.arguments.length; x++)
		{//loop through the arguments of the preload function
		  myimages[x] = new Image();  //create an image
		  thisPic = imgpath + preload.arguments[x];  //prepare to load the source
		  myimages[x].src = thisPic;  //place the source file in the image object
		}
	}
}

function rollover(thispic, imgfile)
{
		var rollpic = imgpath + imgfile;  //add the path to the file name
	thispic.src = rollpic;  //re-place the current source with the new source
}
	var myPix = new Array("_images/thumb_1.png","_images/thumb_2.png","_images/thumb_3.png");
	var thisPic = 0;

	function initLinks() {
		document.getElementById("prevLink").onclick = processPrevious;
		document.getElementById("nextLink").onclick = processNext;
	}

	function processPrevious() {
		if (thisPic == 0) {
			thisPic = myPix.length;
		}
		thisPic--;
		document.getElementById("myPicture").src = myPix[thisPic];
		return false;
	}

	function processNext() {
		thisPic++;
		if (thisPic == myPix.length) {
			thisPic = 0;
		}
		document.getElementById("myPicture").src = myPix[thisPic];
		return false;
	}




	//window.onload=init;//run init onload - replace with your function!	
	//addOnload(init); 		
	//with addOnload() we can add as many functions as we wish to window.onload (one by one)!
</script>


</head>

<body onload="preload('btn1_over.gif','btn2_over.gif','btn3_over.gif');">
<h3>A3</h3>
<body>
<p> Some text here </p>
<p><img src="_images/thumb_1.png" id="myPicture" width="200" height="400" alt="Slideshow" /></p>

<h2><a href="previous.html" id="prevLink"><< Previous</a>  <a href="next.html" id="nextLink">Next >></a></h2>

<p>
<a href="#"><img src="_images/btn1.gif" onmouseover="rollover(this,'btn1_over.gif')" onmouseout="rollover(this,'btn1.gif')" border="0"></a>
<a href="#"><img src="_images/btn2.gif" onmouseover="rollover(this,'btn2_over.gif')" onmouseout="rollover(this,'btn2.gif')" border="0"></a>
<a href="#"><img src="_images/btn3.gif" onmouseover="rollover(this,'btn3_over.gif')" onmouseout="rollover(this,'btn3.gif')" border="0"></a>
<a href="#"><img src="_images/btn3.gif" onmouseover="rollover(this,'btn1_over.gif')" onmouseout="rollover(this,'btn1.gif')" border="0"></a>
</p>

</body>
</html>

Chezshire · May 1, 2010

I found the problem, which was in how i was labeling the images being called by the initLinks function. By changing the 'thisPict' to 'thisThumb', it solved everything -- yeah!!! I did it!!

Go me go me (laughing at myself )

-Chez

Sign In

onload - addonload error - newbie college student asking for help!

Recommended Posts

Chezshire

Link to comment

Share on other sites

Chezshire

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information