Hi all,
I'm new here. I've been reading around on here and like what I'm seeing. Looks like a great community.

I have a JS issue I'm really needing help on. My biggest problem is my lack of understanding of JS. I've learned a bit but can more tweak it than actually write much of anything. This time, I can't figure out how to even tweak it though.

I have implemented an open source code into my site. The way it works is when you hover over the text you specify, a gallery set of photos shows up. It's all done with html/css using :hover. The JS comes in on IE6. :hover won't work with IE6 in how this thing was written, so there is a conditional comment redirecting to a linked JS file that recreates that hover effect for IE6 thru some JS. It all works fine everywhere in the demo.

I am altering one thing. I'm adding a thumbnail image to the text (like a photo and a caption) so that when you hover over either it activates the gallery set. But when I add that photo to the text it breaks the JS. I can get it to work everywhere else with just HTML/CSS, it's just the JS specific to IE6 that goes bad and I cannot figure out how to tweak the JS to make it work for what I'm doing.

I get an IE6 error: 'myTarget.style' is null or nt an object
Which I can't really figure out what that is telling me.
Does anyone have any suggestions? Thanks for your feedback.

So, the original HTML is this:

<div class="gallery" id="gallery1">
<ul>
<li class="first">
<a href="photos/vacation" class="section">
Vacation Photos</a>
</li></ul></div>

My altered HTML is this:

<div class="gallery" id="gallery1">
<ul>
<li class="first">
<a href="photos/vacation" class="section">
<img src="photos/vacation/vacation1_thumb.jpg" alt="Blue Desert">
<span>Vacation Photos</span>
</a>
</li></ul></div>

(I also tried it with no span and putting the img before the anchor tag but i still got the same results)

The Original JS is this:

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

startGallery = function() {
  if (document.all && document.getElementById) {
      galleries = getElementsByClassName(document, "div", "gallery");
      for (x = 0; x < galleries.length; x++) {
        galleryRoot = galleries[x].childNodes;
        workingID = galleries[x].id;
        fullSize = document.getElementById(workingID).firstChild.childNodes.length;
        for (i = 0; i < fullSize; i++) {
            node = document.getElementById(workingID).firstChild.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    if(this.hasChildNodes()) {
                        myTarget = this.childNodes[2];
                        galleryContainer = document.getElementById(workingID);
                        totalWidth = galleryContainer.offsetWidth;
                        targetWidth = Math.floor(totalWidth * .94);
                        myTarget.style.width = targetWidth + 'px';
                    }
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className = this.className.replace(" over", "");
                }
            }
        }
      }
  }
}

Event.observe(window, 'load', startGallery, false);

If it's saying "'myTarget.style' is null" it means that it cannot find a style tag in myTarget. Either that or you have not set the variable correctly.

I would write it like this

var myTarget = this.childNodes[2];

When you say myTarget.style is refers to the style attribute in the tag. So, add an empty style element.