New Topic/Question
Reply
<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>
8 Replies - 770 Views - Last Post: 23 February 2011 - 02:10 AM
#1
dirtyrice1977
- New D.I.C Head
Reputation: 0
- 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.
Is This A Good Question/Topic?
0
MultiQuoteReplies To: document undefined
#2
dirtyrice1977
- New D.I.C Head
Reputation: 0
- 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
#4
dirtyrice1977
- New D.I.C Head
Reputation: 0
- Posts: 32
- Joined: 23-January 11
Re: document undefined
Posted 21 February 2011 - 03:26 PM
D.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
- D.I.C Regular
-
Reputation: 112
- Posts: 454
- 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.
Any further questions? I'll be glad to help.
- 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
- Self-Trained Economist
-
Reputation: 9030
- Posts: 33,500
- Joined: 27-December 08
Re: document undefined
Posted 21 February 2011 - 05:20 PM
Related threads merged.
Was This Post Helpful?
1
#7
forest51690
- D.I.C Regular
-
Reputation: 58
- 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
- D.I.C Regular
-
Reputation: 81
- Posts: 430
- Joined: 30-June 10
Re: document undefined
Posted 22 February 2011 - 07:34 PM
dirtyrice1977, on 21 February 2011 - 03:26 PM, said:
D.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
- 痛覚残留
-
Reputation: 2889
- Posts: 7,535
- Joined: 08-June 10
Re: document undefined
Posted 23 February 2011 - 02:10 AM
D.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
|
|
| 