JS substitute for IE6 hover not working

Hi, I'm new here. These types of forums are a lifesaver for a guy like me who still has tons to learn, so thanks to all you zen masters out there. I don't know JS much YET, I can only write simple code and edit it a bit but this one has me stumped. Any pointers are greatly appreciated.

So, I have this Suckerfish HoverLightbox open source code I've downloaded and implemented on my site. Great stuff, works fine. He did a conditional comment for IE6 to point to an external JS file to simulate hover where IE6 didn't understand. Works great.

I have a modification to how it was originally created and that is where things go awry. The original hover was just for text. I want an image to be associated with the text. I have it working everywhere except on that IE6 JS and cannot figure out how to tweak the JS to get it to work.
(The error IE6 gives me is: myTarget.style is null or not an object)

Here is the original HTML:

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


Here is my modified HTML:

<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 his orig with my img tag residing before the anchor but same issue)

and here is the original JS:

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);

the code you posted is very fragile, having child node locations hard-coded in.

i could try to ajdust it, but its complicated, and i don't like fragile scripts anyways.

can you post the CSS in the :hover section?

i think it would be easier (for me at least) to recreate it from scratch...

I tried messing with this too with mixed results. Never got old IE6 to work though. I appreciate your time and knowledge on this.

.gallery { padding:0 4px 10px 0; }
.gallery ul { margin:0; padding:0; background:#333333 url(../images/blackbars.jpg) left top repeat-x; list-style:none; position:relative; height:124px; }

.gallery ul li { display:block; width:auto; float:left; color:#fff; height:124px; }
.gallery ul li a { display:block; width:120px; margin:0 auto; color:#fff; text-decoration:none; padding:8px .8em 8px 1em; font:1.1em Verdana, sans-serif; }
.gallery ul li a img { margin: 0px 0px 0px 8px; text-decoration:none;}
.gallery ul li a span { text-decoration:underline; margin: 2px auto; font:.9em Verdana, sans-serif; font-weight:bold; display:block; width:120px; text-align:center;}
.gallery ul li a:hover { text-decoration:none; }

.gallery ul li.first { }

.gallery ul li ul { display:none; position:absolute; top:34px; height:auto; border-bottom:6px solid #960000; border-left:1px solid #960000; border-right:1px solid #960000; width:95%; left:2%; padding:8px 5px 15px 5px; }
.gallery ul li:hover ul,
.gallery ul li.over ul { display:block; }
.gallery ul li ul li { display:inline; float:none; background-image:none; height:auto; }
.gallery ul li ul li a { background-image:none; margin:8px; padding:2px; position:relative; border:1px solid #960000; float:left; display:block; width:75px; height:50px; background-color:#fff; }
.gallery ul li ul li a:hover { background-image:none; z-index:2; }
.gallery ul li ul li a img { position:absolute; top:2px; width:75px; height:50px; border:0; margin:0; padding:0; }
.gallery ul li a:hover img,
.gallery ul li a:active img,
.gallery ul li a:focus img { width:100px; height:75px; left:-11px; top:-10px; z-index:1; border:1px solid #000; }
.gallery ul li a:hover span { text-decoration:underline; margin: 2px auto; font:.9em Verdana, sans-serif; font-weight:bold; display:block; width:120px; text-align:center;}
.gallery ul li.overview { display:block; clear:both; padding:5px 10px 0 10px; color:#000; }


#gallery1 ul { z-index:2; }
#gallery2 ul { z-index:1; }

before i pound something out, let me make sure we are on the same page.

you want the link un-underlined, the UL shown, and the image "width:100px; height:75px; left:-11px; top:-10px; z-index:1; border:1px solid #000;".
__________________________________________________________

wait a second here, i am making this too complicated. just thought of something. you can just duplicate the hover code into one class, and alter the class of the element upon mouseover.

li.hover {display:block;}
img.hover {width:100px; height:75px; left:-11px; top:-10px; z-index:1; border:1px solid #000;}
a.hover { text-decoration:none; }


you can then hit children of the top LI by setting it's onmouseover to modify the three kids using syntax like "this.getElementsByTagName("a")[0].className = 'hover';"

repeat for each tag you want to modify.


EDIT:
you might want to use a class switcher function, since you already have classes applied. they will add the class, rather than clobber it like my example. they should be able to remove the .hover class onmouseout just as easily. i dont have one handy.
i know there is one bundled with prototype, and ive see several floating around the internet that need no other support code (prototype is kinda big).

if you can't find one, i can probably be talked into writing one, its been on my list of functions to write anyways.