8 Replies - 1007 Views - Last Post: 23 February 2011 - 02:10 AM

#1 dirtyrice1977  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 23-January 11

document undefined

Posted 21 February 2011 - 12:03 PM

i created an array for some images i'd like to use in a onmouseover. I'm having an error that reads document[loc] is undefined.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
	img = new Array()
	for(i=1;i<=7;i++)
	{
		img[i] = new Image();
		img[i].src = "navrollover/b" + i + "over.gif";
	}
	function rollOver(loc,elem)
	{
		document[loc].src = img[elem].src;    //the error is here
	}
</script>
<style>
select	{font-family:"Courier New", Courier, monospace}
</style>
</head>

<body>
<table width="1083" border="0" align="center" >
  <tr>
    <td colspan="2" align="center"><img src="headerimages/to_go_menu3.jpg" width="553" height="89" /></td>
  </tr>
  <tr>
    <td width="20%" rowspan="2">



    <table border="0" cellspacing="0" cellpadding="0" height="450" align="center" >
<tr><td><a href="intro.html" onmouseover = "rollOver('B1',1)" ><img src="navrollover/b1off.gif" width="147" height="20" border="0" ></a></td></tr>
<tr><td><a href="menu.html"><img src="navrollover/b2off.gif" width="147" height="20" border="0" ></a></td></tr>
<tr><td><a href="reservations.html" ><img src="navrollover/b3off.gif" width="147" height="20" border="0" ></a></td></tr>
<tr><td><a href="togo.html" ><img src="navrollover/b4off.gif" width="147" height="20" border="0" ></a></td></tr>
<tr><td><a href="catering.html" ><img src="navrollover/b5off.gif" width="147" height="20" border="0" ></a></td></tr>
<tr><td><a href="directions.html" ><img src="navrollover/b6off.gif" width="147" height="20" border="0" ></a></td></tr>
<tr><td><a href="comments.html" ><img src="navrollover/b7off.gif" width="147" height="20" border="0" ></a></td></tr>
</table>


    </td>



Is This A Good Question/Topic? 0
  • +

Replies To: document undefined

#2 dirtyrice1977  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 23-January 11

Re: document undefined

Posted 21 February 2011 - 01:40 PM

This is the first time i've used arrays in javascript. I have seven images and the are b1over.gif to b7over.gif. i'm trying to get these images to show on the mouseover.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
	img = new Array()
	for(i=1;i<=7;i++)
	{
		img[i] = new Image();
		img[i].src = "navrollover/b" + i + "over.gif";
	}
	function rollOver(elem)
	{
		document.src = img[elem].src;
	}
</script>
<style>
select	{font-family:"Courier New", Courier, monospace}
</style>
</head>

<body>
<table width="1083" border="0" align="center" >
  <tr>
    <td colspan="2" align="center"><img src="headerimages/to_go_menu3.jpg" width="553" height="89" /></td>
  </tr>
  <tr>
    <td width="20%" rowspan="2">



    <table border="0" cellspacing="0" cellpadding="0" height="450" align="center" >
<tr><td><a href="intro.html" onmouseover = "rollOver(1)" ><img src="navrollover/b1off.gif" width="147" height="20" border="0" ></a></td></tr>

<tr><td><a href="menu.html"  onmouseover = "rollOver(2)" ><img src="navrollover/b2off.gif" width="147" height="20" border="0" ></a></td></tr>

<tr><td><a href="reservations.html"  onmouseover = "rollOver(3)" ><img src="navrollover/b3off.gif" width="147" height="20" border="0" ></a></td></tr>

<tr><td><a href="togo.html"  onmouseover = "rollOver(4)" ><img src="navrollover/b4off.gif" width="147" height="20" border="0" ></a></td></tr>

<tr><td><a href="catering.html"  onmouseover = "rollOver(5)" ><img src="navrollover/b5off.gif" width="147" height="20" border="0" ></a></td></tr>

<tr><td><a href="directions.html"  onmouseover = "rollOver(6)" ><img src="navrollover/b6off.gif" width="147" height="20" border="0" ></a></td></tr>

<tr><td><a href="comments.html"  onmouseover = "rollOver(7)" ><img src="navrollover/b7off.gif" width="147" height="20" border="0" ></a></td></tr>

</table>





Was This Post Helpful? 0
  • +
  • -

#3 D.Mulroy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: document undefined

Posted 21 February 2011 - 02:07 PM

I believe that your document.src needs to be document.images[elem].src
Was This Post Helpful? 1
  • +
  • -

#4 dirtyrice1977  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 23-January 11

Re: document undefined

Posted 21 February 2011 - 03:26 PM

View PostD.Mulroy, on 21 February 2011 - 02:07 PM, said:

I believe that your document.src needs to be document.images[elem].src


thank you so much. this worked perfectly. if you have the time can you breakdown why it works. I can do if statements, arrays and for loops based on what i know from other programming languages but i'm having trouble connecting my function to the line of html that i want affected. Also, if you know a good beginner by the numbers javascript text book i would appreciate it.
Was This Post Helpful? 0
  • +
  • -

#5 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: document undefined

Posted 21 February 2011 - 04:28 PM

Ok, there are a few minor problems here and there that prevent the script from working properly.
  • As of now, your array and for loop are pointless, as it doesn't affect the code at all.
  • Your rollover function rollOver() can't do anything as it doesn't select the current item that was rolled over. Change it to document.getElementById(elem) to get it to work. (NOTE: This will only work if you give all of your links/images unique id's, - which I recommend).
  • You don't actually give it a URL in which the image turns into!


Any further questions? I'll be glad to help.
Was This Post Helpful? 1
  • +
  • -

#6 macosxnerd101  Icon User is online

  • Self-Trained Economist
  • member icon




Reputation: 10364
  • View blog
  • Posts: 38,367
  • Joined: 27-December 08

Re: document undefined

Posted 21 February 2011 - 05:20 PM

Related threads merged.
Was This Post Helpful? 1
  • +
  • -

#7 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: document undefined

Posted 21 February 2011 - 05:31 PM

you are trying to access document['B1']. This is nonstandard javascript. The usual way to select an element is by writing document.getElementById('B1'), where "B1" is the id of an element -> <span id="B1">asd</span>
Was This Post Helpful? 1
  • +
  • -

#8 D.Mulroy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: document undefined

Posted 22 February 2011 - 07:34 PM

View Postdirtyrice1977, on 21 February 2011 - 03:26 PM, said:

View PostD.Mulroy, on 21 February 2011 - 02:07 PM, said:

I believe that your document.src needs to be document.images[elem].src


thank you so much. this worked perfectly. if you have the time can you breakdown why it works. I can do if statements, arrays and for loops based on what i know from other programming languages but i'm having trouble connecting my function to the line of html that i want affected. Also, if you know a good beginner by the numbers javascript text book i would appreciate it.

Every image on the page or the DOM is stored in an array. They are stored in order based on the order they are read in the html. So...
document.images[elem].src gets the index number of the image you'd like to change in your method and then changes its source.
Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3479
  • View blog
  • Posts: 10,020
  • Joined: 08-June 10

Re: document undefined

Posted 23 February 2011 - 02:10 AM

View PostD.Mulroy, on 23 February 2011 - 03:34 AM, said:

Every image on the page or the DOM is stored in an array.

a list, not an array. though these are details which hardly fall on your feet.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1