Javascript help

[magnus]

I have a little problem with a JavaScript I've written. It works in Mozilla and Safari, but not in Internet Explorer, so I need a little help.

The page can be found here: http://hightower.urbanturban.no/fatalerror/menu.html
And the hover effect is supposed to look like this: http://hightower.urbanturban.no/fatalerror/hover.gif

The Javascript:

var preload=new Image();
preload.src="images/hover.gif";
function changeImages(img_name,img_src) {
document[img_name].src = img_src;
}

A sample from the HTML code:

<a href="index.html" class="menu"
onmouseover="changeImages('index', 'images/hover.gif')"
onmouseout="changeImages('index', 'images/nhover.gif')">
<img src="http://hightower.urbanturban.no/fatalerror/images/nhover.gif"
alt="" id="index" />Home</a>

And the IE error message:

document[...] is null or not an object

 

[Arden]

Either use Adobe Imageready, or try the following code.

This goes in your head:

<script language="JavaScript">

<!-- Hide the following JavaScript from non-javascript browsers

/* Swap one image for another i.e. Rollover or Mouseover
This function uses the image's name, set in the
HTML <img> tag to access the image's place in the DOM */

function swapImages(ImageName, NewImage)
{

/* Test to see if the browser understands rollovers.
If it does, swap one image for the other. */

if (document.images)
{
document[ImageName].src = NewImage;
}
}

// -->
</script>

And this goes in your <a> tags:

onmouseover="swapImages('secondary', 'xyz.jpg')" 
onmouseout="swapImages('secondary', 'xyz.gif')"

Seriously, I recommend using Adobe Imageready for something like this (bundled with Photoshop). It's quite easy to create slices and to manage different states of an image. You can customize the way you want the code and associated sliced files to be output as well.

 

[magnus]

Wohoo!
I figured out the problem. I was using the 'id' atribute in the <img> tags, and IE didn't like that, so when I tried 'name' instead it worked
(the tutorials at w3schools.com told me to use id instead of name)

 

[Pengu]

using ID is probably "better" html/javascript in that it conforms to the guidelines, but IE as we all know, just plain sucks when it comes to following standards.

 

[Arden]

You can also use classes, as IE likes images with class...

 

[Arden]

... also, I wouldn't recommend using tables, because they're a b!tch to maintain and CSS has a lot more control using div's and span's than tables.

 

[magnus]

Tables are not really that hard to use, but I will do a lot of changes before the menu is finished

 

[Arden]

Tables are more tedious than difficult. They use a lot more tags than div's with CSS, they are much less flexible, and they take more time to render. You can use whatever you like, of course, but try to keep this in mind.

Tables are sometimes easier to align than div's, but I prefer div's over tables anyday.

Pengu: IE for Mac is a lot better than IE for Windows, but it still has annoying quirks both in its interpretation of some code and in its actual functioning.

 

[Jabberwocky]

Originally posted by magnus
Wohoo!
I figured out the problem. I was using the 'id' atribute in the <img> tags, and IE didn't like that, so when I tried 'name' instead it worked
(the tutorials at w3schools.com told me to use id instead of name)

Just to be a pedantic bar steward, I use both ID= and name= on my elements so that the script is multi-browser friendly!

 

[magnus]

Somebody else also told me I should use ID + Name, offcourse that was after I had changed all the IDs to name

 

[BitWit]

From what I've seen NAME should cover all the browswers for rollover images.

 

[bootedbear]

Use of the name attribute for this is non-standard. I'd keep the id attribute there.

hth,
bear