Images don't load when using JavaScript in SRC= attribute for FireFox

[jblossom]

Hello,

I'm in a quandary as to how to address a problem. The site in question:

http://agapeyoga.com

On the left-hand side of the site are image navigation elements that
change when clicked based on where you are in the navigation heirarchy.
They work just fine in IE, but Firefox doesn't load the initial state
of the images. If you mouse over the images that have onmouseover or
onmouseout events, though, the images associated with those events do
pop up correctly. I have tired a few "best guess" stabs using OnLoad
events to no avail. Grateful for your help. Javascript file is at.

http://agapeyoga.com/common/lib_main.js

sample HTML code:

<a href="../" onMouseOver="imgHov('home');"
onMouseOut="simNav('home');">

<img src="javascript:simNav('home');" name="home" border="0" width="66"
height="20"></a>

The simNav function:

function simNav(n_name) {
var url =this.location.href
var
root_name =url.substring(url.indexOf(n_name),eval(url.indexOf(n_name)+
n_name.length))
if (this.document) {
if (n_name == root_name || (n_name == "home" && homepage ==
"y")) {
document[n_name].src = eval(n_name + "On" + ".src");
} else {
document[n_name].src = eval(n_name + "Off" + ".src");
}
}
return (document[n_name].src);
}

Sample image source loading for Javascript:

homeOn = new Image(); // Active images
homeOn.src = "/images/n_home_on.gif";

Very grateful for your help!

 

[Martin Honnen]

<img src="javascript:simNav('home');"

You have no clue what a javascript: URL is good for, the expression
following the javascript: is supposed to yield the data to load so
unless your simNav('home') call returns image data that the image
element can render that construct is pointless.

See <http://www.elf.org/pnglets/> where that is used in a way it makes
sense.

If you need to call that simNav function then use
<script type="text/javascript">
simNav('home');
</script>
where that function needs to be called.
Use a static image element e.g.
<img src="whatever.gif" alt="whatever" name="whatever">
so that with or without JavaScript the image or its alt text is rendered.
If you only want to render the img element with script then use
document.write
<script type="text/javascript">
document.write(
'<img src="whatever.gif" alt="whatever" name="whatever">');
</script>
of course there you have all the power of JavaScript expressions thus if
you have a function yielding a URL then you can do
<script type="text/javascript">
document.write(
'<img src="' + getURL('whatever') + '" alt="whatever" '>');
</script>

 

[jblossom]

Interesting solution, worth trying, many thanks. Another alternative I
was thinking of was trying to use an "eval" statement around the
"javascript:" statement, since it seems to execute fine enough once the
page is loaded.

Thanks,
John Blossom