document.images[imgName] has no properties

J

Jeff

I get the following error when I try to rollover my button:

document.images[imgName] has no properties Line: 22

Am I doing this correctly? Suggestions? This is using Netscape 7.2
on Fedora core 4.

Here's my simple html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<script type="text/javascript">
<!-- HIDE

if (document.images)
{
document.images["order1"] = new Image(135,40);
document.images["order1"].src = "images/ordernow1.jpg";;
document.images["order2"] = new Image(135,40);
document.images["order2"].src = "images/ordernow2.jpg";;
}

function rollover(imgName,src)
{
if (document.images)
{
document.images[imgName].src = src;
return false;
}
return true;
}

// DONE hiding -->
</script>

</head>

<body>

<a href="http://www.mysite.com/order.html"
onMouseover="return rollover('order2','images/ordernow2.jpg');"
onMouseout="return rollover('order1','images/ordernow1.jpg');">
<img src="images/ordernow1.jpg">
</a>

</body>
</html>
 
V

VK

Jeff said:
I get the following error when I try to rollover my button:

document.images[imgName] has no properties Line: 22
Click to expand...

Change:
function rollover(imgName,src)
{
if (document.images)
{
document.images[imgName].src = src;
return false;
}
return true;
}

to

function rollover(imgName,neverUseNativeNameAsVarName)
{
if (document.images)
{
document.images[imgName].src = neverUseNativeNameAsVarName;
return false;
}
return true;
}

;-)
 
J

Jeff

Ok, that was a dumb mistake on my part :) However,
changing the 'src' variable to anything else still doesnt
work. I still get the same error.

Just a note on my orig code, IE doesnt complain at all.
Im using IE 6.0. Then again it doesnt rollover either, but
no errors.

Thanks for the first part, try again? :)
 
L

Lee

Jeff said:
I get the following error when I try to rollover my button:

document.images[imgName] has no properties Line: 22

Am I doing this correctly? Suggestions? This is using Netscape 7.2
on Fedora core 4.

Here's my simple html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<script type="text/javascript">
<!-- HIDE

if (document.images)
{
document.images["order1"] = new Image(135,40);
document.images["order1"].src = "images/ordernow1.jpg";;
document.images["order2"] = new Image(135,40);
document.images["order2"].src = "images/ordernow2.jpg";;
}

function rollover(imgName,src)
{
if (document.images)
{
document.images[imgName].src = src;
return false;
}
return true;
}

// DONE hiding -->
</script>

</head>

<body>

<a href="http://www.mysite.com/order.html"
onMouseover="return rollover('order2','images/ordernow2.jpg');"
onMouseout="return rollover('order1','images/ordernow1.jpg');">
<img src="images/ordernow1.jpg">
</a>

</body>
</html>
Click to expand...


Your rollover script is changing the src of the two new images
that you create above. The only visible image on your page doesn't
even have a name or id.
 
M

Michael Winter

On 21/11/2005 19:17, Jeff wrote:

[snip]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Click to expand...

Unless you /need/ a Transitional feature, use a Strict document type
declaration.

[snip]
<script type="text/javascript">
<!-- HIDE
Click to expand...

Hide from what? Browsers that are old enough not to recognise a SCRIPT
element (even if they don't support client-side scripts) aren't used on
the Web, not least because they're all but useless now.
if (document.images)
{
document.images["order1"] = new Image(135,40);
Click to expand...

The images collection should be used to /retrieve/ images already in the
document. Create a new object to retain image objects for preloading
purposes:

var preload = {};

/* Check for support of the Image constructor */
if(('object' == typeof Image) || ('function' == typeof Image)) {
/* Preload */
preload.order1 = new Image(135, 40);
preload.order1.src = 'images/ordernow1.jpg';

/* ... */
}

[snip]
<a href="http://www.mysite.com/order.html"
onMouseover="return rollover('order2','images/ordernow2.jpg');"
onMouseout="return rollover('order1','images/ordernow1.jpg');">
Click to expand...

Your rollover function will attempt to look for IMG elements with a name
or id attribute value of 'order1' and 'order2' (depending on the event),
but no such element exists. This is why your code fails.
<img src="images/ordernow1.jpg">
Click to expand...

This element should have an alt attribute (required, even if an empty
string), and must be identified so that the script can reference it.
Change the strings in the event listeners above to reflect this name:

<a href="..."
onmouseover="rollover('order', 'images/ordernow2.jpg');"
onmouseout="rollover('order', 'images/ordernow1.jpg');">
<img id="order" name="order"
alt="..."
src="images/ordernow1.jpg">
</a>

[snip]

Mike
 
M

Michael Winter

Ok, that was a dumb mistake on my part :)
Click to expand...

No, it wasn't. You can use the identifier, src, if you want.

[snip]

Mike


Please quote when you're replying to a post. You can do this with Google
Groups by opening the options panel (show options) at the top of the
post you want to reply to and select 'Reply' from there.

Trim away text that is irrelevant to your reply (preferably indicating
that you've done so), and interleave your comments.

See <http://www.jibbering.com/faq/faq_notes/clj_posts.html>,
particularly the section on 'Interleaved Posting...'.
 
R

Randy Webb

Jeff said the following on 11/21/2005 2:17 PM:
I get the following error when I try to rollover my button:

document.images[imgName] has no properties Line: 22

Am I doing this correctly? Suggestions? This is using Netscape 7.2
on Fedora core 4.

Here's my simple html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<script type="text/javascript">
<!-- HIDE

if (document.images)
{
document.images["order1"] = new Image(135,40);
document.images["order1"].src = "images/ordernow1.jpg";;
document.images["order2"] = new Image(135,40);
document.images["order2"].src = "images/ordernow2.jpg";;
}

function rollover(imgName,src)
{
if (document.images)
{
document.images[imgName].src = src;
return false;
}
return true;
}

// DONE hiding -->
</script>

</head>

<body>

<a href="http://www.mysite.com/order.html"
onMouseover="return rollover('order2','images/ordernow2.jpg');"
onMouseout="return rollover('order1','images/ordernow1.jpg');">
<img src="images/ordernow1.jpg">
Click to expand...

Ignore VK and his ramblings, we are still trying to educate him. Give
your img tag a NAME attribute:

<img src="something.." name="myImage">

document.images['myImage'].src="....."
 
J

Jeff

Thanks to all for teaching me some things I didnt know.
I did what Randy said and it worked just fine.

Thanks!
 
M

Michael Winter

On 21/11/2005 21:32, Michael Winter wrote:

[snip]
Hide from what? Browsers that are old enough not to recognise a SCRIPT
element (even if they don't support client-side scripts) aren't used on
the Web, not least because they're all but useless now.
Click to expand...

Hmm. That didn't come out quite right.

All browsers currently in use on the Web recognise SCRIPT elements, even
if they don't support client-side scripts. They won't render the
contents of the element. If there is some other reason to 'hide' a
script, the better solution would be to place it in an external file.

[snip]

Mike
 
R

Randy Webb

Jasen Betts said the following on 11/22/2005 2:48 PM:
I get the following error when I try to rollover my button:

Here's my simple html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

document.images["order1"] = new Image(135,40);>
Click to expand...


this image doesn't appear to be part of your dcument.
where does the name "order1" come frem - what are you doing to ensure that
this new image keeps that name.
Click to expand...

And it doesn't matter. It is just a preloading routine.
^
|
|
for HTML 4.01 Transitional this should be lower case IIRC
Click to expand...

No, it doesn't matter. Not in HTML4.01 anyway.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Array[0] has no properties 2
Accessing Image in Another <Div> 7
"sticky" buttons? 3
Sort by number of characters 1
multi browser forms issue 12
Having difficulty with the layout of these images / video for this web page 2
Slideshow problem 21

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 443

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,074
Latest member
StanleyFra

Latest Threads

Top