Ns_error_invalid_pointer

http://www.therabbitshome.com

This code:

jZ00m.src="http://www.therabbitshome.com/images/z00m.png";
jZ00m.id="z00m";
jZ00m.onclick=clickZ00m;
jZ00m.onmouseover=z00mMouseover;
jZ00m.onmouseout=z00mMouseout;

function z00mMouseover(){jZ00m.src="http://www.therabbitshome.com/images/z00m_MOUSEOVER.png";}
function z00mMouseout(){jZ00m.src="http://www.therabbitshome.com/images/z00m.png";}

is somehow causing this error:

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.therabbitshome.com/ :: inImg_0 :: line 687" data: no]

and I don't understand why. I know it's this code causing it because I commented it out and didn't get the error. Help plx. To reproduce the problem, you have to click the "BROWSE ART" image.

It works fine in Firefox.

But I have to say that I think your code is what we used to call "spaghetti code": Lots of strands that are all jumbled together in disarray.

Still, you could make many minor tweaks to make this simpler.

Just for example:

function z00mMouseover(){this.src="http://www.therabbitshome.com/images/z00m_MOUSEOVER.png";}
function z00mMouseout(){this.src="http://www.therabbitshome.com/images/z00m.png";}

I would have replaced all these:

function browseMouseover(){document.getElementById("browse").src="http://www.therabbitshome.com/images/browse_MOUSEOVER.png";}
function browseMouseout(){document.getElementById("browse").src="http://www.therabbitshome.com/images/browse.png";}
function infoMouseover(){document.getElementById("info").src="http://www.therabbitshome.com/images/info_MOUSEOVER.png";}
function infoMouseout(){document.getElementById("info").src="http://www.therabbitshome.com/images/info.png";}
function linksMouseover(){document.getElementById("links").src="http://www.therabbitshome.com/images/links_MOUSEOVER.png";}
function linksMouseout(){document.getElementById("links").src="http://www.therabbitshome.com/images/links.png";}
function prevMouseover(){jPrev.src="http://www.therabbitshome.com/images/prev_MOUSEOVER.png";}
function prevMouseout(){jPrev.src="http://www.therabbitshome.com/images/prev.png";}
function nextMouseover(){jNext.src="http://www.therabbitshome.com/images/next_MOUSEOVER.png";}
function nextMouseout(){jNext.src="http://www.therabbitshome.com/images/next.png";}
function z00mMouseover(){jZ00m.src="http://www.therabbitshome.com/images/z00m_MOUSEOVER.png";}
function z00mMouseout(){jZ00m.src="http://www.therabbitshome.com/images/z00m.png";}

with simply:

function myMouseOver() { this.src = this.src.replace(".png","_MOUSEOVER.png"); }
function myMouseOut() { this.src = this.src.replace("_MOUSEOVER",""); }

And then for all those images that need onmousover, I would have coded them as simply

var jZ00m=document.createElement("img");
jZ00m.src="http://www.therabbitshome.com/images/z00m.png";
jZ00m.className="_useMouseOver";

And then you could do:

var mo = document.getElementsByClassName("_useMouseOver");
for ( var m = 0; m < mo.length; ++m )
{
mo[m].onmouseover = myMouseOver;
mo[m].onmouseout = myMouseOut;
}

Though because of the way you add the elements to your page, maybe I wouldn't bother with that last one.