rollover image gallery with xml problem

[jskogheim]

Hello.I'm a noob at javascript and xml, so please bear with me. I've got a very simple image gallery that works. The code looks like this (shortened to only 3 images):

			<a onmouseover="changeImages('img1','images/portfolio1/image1.jpg');return true" 				onmouseout="changeImages('img1','images/portfolio1/image1.jpg');return true" href="#">01</a>  			<a onmouseover="changeImages('img1','images/portfolio1/image2.jpg');return true" 				onmouseout="changeImages('img1','images/portfolio1/image2.jpg');return true" href="#">02</a>  			<a onmouseover="changeImages('img1','images/portfolio1/image3.jpg');return true" 				onmouseout="changeImages('img1','images/portfolio1/image3.jpg');return true" href="#">03</a>  

I have this code in the head to load js and preload images:

<csscriptdict import><script type="text/javascript" src="js/CSScriptLib.js"></script></csscriptdict><csactiondict><script type="text/javascript"><!--var preloadFlag = false;function preloadImages() {	if (document.images) {		pre_image2 = newImage('images/portfolio1/image2.jpg');		pre_image3 = newImage('images/portfolio1/image3.jpg');        	pre_image4 = newImage('images/portfolio1/image4.jpg');		pre_image5 = newImage('images/portfolio1/image5.jpg');		pre_image6 = newImage('images/portfolio1/image6.jpg');		pre_image7 = newImage('images/portfolio1/image7.jpg');		pre_image8 = newImage('images/portfolio1/image8.jpg');		pre_image9 = newImage('images/portfolio1/image9.jpg');		preloadFlag = true;	}}// --></script></csactiondict>

You can see it in context here: http://www.jakobskogheim.com/portfolio1.htmlI think the code works pretty well, but its a PITA to change the images. So I'd like to load the image data with xml. If you look at the link above I've used xml in the div id=nav section. I've been trying the same thing for the gallery and it doesn't work at all. I was able to preload the images from xml, so I'm thinking the culprit is the 'onmouseover()', but I don't know what to do.

<script type="text/javascript">		xmlDoc=loadXMLDoc("dom/portfolio1.xml");		var x=xmlDoc.getElementsByTagName("IMAGE");		for (var i=0;i<x.length;i++)		{		document.write("<a onmouseover='changeImages('img1','");		document.write(x[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);		document.write("');return true' onmouseout='changeImages('img1','");		document.write(x[i].getElementsByTagName("LINK")[0].childNodes[0].nodeValue);		document.write("');return true' href='#'>");		document.write(x[i].getElementsByTagName("NUM")[0].childNodes[0].nodeValue);		document.write("</a>   ");		}		</script>

In context: http://www.jakobskogheim.com/test/portfolio1.htmlAny suggestions? Maybe theres a completely different way I should be doing this?Thanks a ton,Jakob

[Jesdisciple]

After just a casual glance, here's some stuff that may help...

1. Check the HREF of your first link; it has XML or HTML in it.
2. Notes from Firefox:

   Warning: Unknown property 'paddding-bottom'.  Declaration dropped.Source File: http://www.jakobskogheim.com/css/style.cssLine: 290Error: Permission denied to call method Element.getElementsByTagNameSource File: http://www.jakobskogheim.com/portfolio1.htmlLine: 75Error: Permission denied to get property Element.childNodesSource File: http://www.jakobskogheim.com/portfolio1.htmlLine: 130Error: The stylesheet http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/css/style.css was not loaded because its MIME type, "text/html", is not "text/css".Source File: http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/div%3E%3Cdiv%20id=%22foot%22%3E%3Cdiv%20id=%22sel%22%3E%3Cp%20class=%22sel%22%3EPeople:%C2%A0%C2%A0%C2%A0%3Ca%20onmouseover=%22changeImages(Line: 0Error: missing; before statementSource File: http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/js/loadxmldoc.jsLine: 2, Column: 2Source Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Error: loadXMLDoc is not definedSource File: http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/div%3E%3Cdiv%20id=%22foot%22%3E%3Cdiv%20id=%22sel%22%3E%3Cp%20class=%22sel%22%3EPeople:%C2%A0%C2%A0%C2%A0%3Ca%20onmouseover=%22changeImages(Line: 44

[jskogheim]

Hey Chris,I don't see what you mean by the href of my first link having html or xml in it? Am I looking for the letters html or xml? Or am I looking for code? Either way I'm not seeing it. How'd you get the firefox notes? Even better, what do they mean? :)Thanks

[Jesdisciple]

Here's the first link's HREF:

http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/div%3E%3Cdiv%20id=%22foot%22%3E%3Cdiv%20id=%22sel%22%3E%3Cp%20class=%22sel%22%3EPeople:%C2%A0%C2%A0%C2%A0%3Ca%20onmouseover=%22changeImages(

When converted to ASCII text, it reads:

http://www.jakobskogheim.com/</div></div><div id="content"><div id="disp"><img src="images/portfolio1/image1.jpg" id="img1" name="img1" alt="Photograph"></img></div></div><div id="foot"><div id="sel"><p class="sel">People:Â Â Â <a onmouseover="changeImages(

I loaded the page in Firefox and got the first three things, then played around with it some and got the rest of them. They are displayed in the Error Console (Tools > Error Console) and the wonderful Firebug addon.

Warning: Unknown property 'paddding-bottom'.  Declaration dropped.Source File: http://www.jakobskogheim.com/css/style.cssLine: 290

Your CSS property has one too many 'd's in it.

Error: Permission denied to call method Element.getElementsByTagNameSource File: http://www.jakobskogheim.com/portfolio1.htmlLine: 75Error: Permission denied to get property Element.childNodesSource File: http://www.jakobskogheim.com/portfolio1.htmlLine: 130

I'm honestly not sure what's up here, so I'll wait for a more enlightened answerer.

Error: The stylesheet http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/css/style.css was not loaded because its MIME type, "text/html", is not "text/css".Source File: http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/div%3E%3Cdiv%20id=%22foot%22%3E%3Cdiv%20id=%22sel%22%3E%3Cp%20class=%22sel%22%3EPeople:%C2%A0%C2%A0%C2%A0%3Ca%20onmouseover=%22changeImages(Line: 0

Your server is sending a "Content-type:text/html" HTTP header for the specified stylesheet, so (I think) it's not being parsed as CSS. The first URL also has HTML in it; the second URL is the one we already knew that about.To help you solve this, we need to know where the page comes from; do you generate it with PHP/ASP/Perl/ColdFusion/etc. or is it an ordinary file?

Error: missing; before statementSource File: http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/js/loadxmldoc.jsLine: 2, Column: 2Source Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JavaScript doesn't need a DOCTYPE; remove that entire line.

Error: loadXMLDoc is not definedSource File: http://www.jakobskogheim.com/%3C/div%3E%3C/div%3E%3Cdiv%20id=%22content%22%3E%3Cdiv%20id=%22disp%22%3E%3Cimg%20src=%22images/portfolio1/image1.jpg%22%20id=%22img1%22%20name=%22img1%22%20alt=%22Photograph%22%3E%3C/img%3E%3C/div%3E%3C/div%3E%3Cdiv%20id=%22foot%22%3E%3Cdiv%20id=%22sel%22%3E%3Cp%20class=%22sel%22%3EPeople:%C2%A0%C2%A0%C2%A0%3Ca%20onmouseover=%22changeImages(Line: 44

This one also goes over my head.Fix the ones you can and see if the others go away.

[jskogheim]

Omgosh I read and reread the line about padding, only about 4 or 5 times, and I didn't see the extra d :)If I understand correctly, I'm not using anything to generate the page, other than my keyboard. I'm just editing my files in notepad :)The javascript must be adding all that html into the href on those links. I'm busy fixing what I can :)Thanks!

[Jesdisciple]

Firefox is getting really confused, but I don't think it's entirely Firefox's fault. Some weird bug in your code is apparently making a weird bug in Firefox visible.Only that first link is actually getting stuff inserted into it; the rest are somehow inheriting the mess via their relative nature. Can you guess where that HTML might be coming from?

[jskogheim]

Its on the page right above the java script:

	</div></div><div id="content">	<div id="disp">		<img src="images/portfolio1/image1.jpg" id="img1" name="img1" alt="Photograph"></img>	</div></div><div id="foot">	<div id="sel">		<p class='sel'>People:   

I have no clue why its grabbing that html though

[jskogheim]

I don't have DOCTYPE; in either of my js files, its only at the top of my html files. Another thing I don't understand Do xml documents need:

<?xml version="1.0" encoding="ISO-8859-1"?>

???

[Guest FirefoxRocks]

I don't have DOCTYPE; in either of my js files, its only at the top of my html files. Another thing I don't understand Do xml documents need:

<?xml version="1.0" encoding="ISO-8859-1"?>

???

You shouldn't have DTDs in your JavaScript files, they aren't markup like HTML.And yes, each XML document needs the XMLPI (the code you wrote above).

[Jesdisciple]

FR, he knows about DTDs and JS; I already told him and he knew it before then. I'm going to leave the DTD problem for last and just hope it goes away.Jakob, I'm looking at your page's source, and Firefox says the original source has the first link as corrupted, i.e. JS has nothing to do with the HTML in the URL. Can you check your source files as found on the server and make sure that's not the case? If it isn't, please post a zip-archive with all the relevant files. I'm going to debug it a bit.By the way, there's a link on your homepage whose text is JavaScript and whose HREF is the similar to the link in question here...

[jskogheim]

Ya, I really hope the DTD problem will just go away if I fix whatever else is happening, that would be one less thing to worry about.I checked all the files and they all seem fine. I'm using all the same files on my main site (just not with JS getting the links from XML) and it all works fine. I have a copy of everything in a test folder and thats where I'm trying to make this new code work. I've zipped up the test folder for you: http://www.jakobskogheim.com/files/test.zipThere are two pieces of JS on each page (plus the gallery). One is loading the navigation bar on upper right from XML, the other is loading the copyright info on lower left from XML. Maybe one of them is causing the problem?P.S. How do you get Firefox's error console to only display the errors for the window or tab you have open? Also I tried using the firebug addon and it screwed up all the JS on my pages; I had to disable it.

[Jesdisciple]

That's really weird. I don't see any links (the nav bar) in the version on my comp; instead I see two pictures (not present on your site). And the errors I get dwindle to two (the first repeating four times):

Error: loadXMLDoc is not definedSource File: http://localhost/projects/Portfolio/portfolio1.htmlLine: 117Error: xmlDoc is not definedSource File: http://localhost/projects/Portfolio/portfolio1.htmlLine: 37

I don't see the copyright on either page. When I disable Firebug I see no changes.Clear the Error Console, then (re)load the page or perform whatever other action triggers the error.

[Jesdisciple]

Update: I was only disabling Firebug for the specific site; disabling the entire addon and restarting Firefox fixes almost everything mentioned above.Now Jakob, what problems are you having with getting this to work? EDIT: Oh, you just need to change the images more easily. Where is your newImage function defined?

[jskogheim]

I decided to ditch that code and give jquery a try. I used a plugin from http://devkick.com/lab/galleria/It doesn't use xml, but takes the image data from a very simple, easy to update unordered list. And has some cool fade effects :)I'm having a centering problem with css: centering a div with unknown widthThanks for the help.

[Jesdisciple]

Sorry about the Firebug mishap!