type mismatch error

[boojum]

this is my first javascript, trying to get links to switch their image (the links in question are all imgs) on mouse over.
there are probably many problems with this script, if you want to point others out that would be helpful but i'm looking to fix the current error ie throws at me:
Line: 46 ([edit:its the line with the >>>>> pointing to it])
Error: Type mismatch.
this is all in a seperate .js file



// GLOBAL variables


var IMGS = document.getElementsByTagName( 'IMG' ) ;
// directory+file file type
var REGEX1 = /(.*\/\w*)(\.(?:jpg|png|gif))/i ;
// directory+file 'v' file type
var REGEX2 = /(.*\/\w*)v(\.(?:jpg|png|gif))/i ;


// ------------------------------------
// Functions


function Navlinkimagebubble( IMGSid ) {
var currentimg = document.getElementById( IMGSid ) ;
REGEX1.exec( currentimg.src ) ;
newsrc = '$1' + 'v' + '$2' ;
currentimg.src = newsrc ;
}

function Unnavlinkimagebubble( IMGSid ) {
var currentimg = document.getElementById( IMGSid ) ;
REGEX2.exec( currentimg.src ) ;
newsrc = '$1' + '$2' ;
currentimg.src = newsrc ;
}


// ------------------------------------
// script


if ( document.addEventListener ) {
for ( iterator = 0; iterator < IMGS.length; iterator++ ) {
if ( IMGS[iterator].className == 'navlinkimage' ) {
IMGS[iterator].addEventListener( 'mouseover', Navlinkimagebubble( IMGS[iterator].id ), false ) ;
IMGS[iterator].addEventListener( 'mouseout', Unnavlinkimagebubble( IMGS[iterator].id ), false ) ;
}
}
}

else if ( document.attachEvent ) {
for ( iterator = 0; iterator < IMGS.length; iterator++ ) {
if ( IMGS[iterator].className == 'navlinkimage' ) {

>>>>>>>>>>>> IMGS[iterator].attachEvent( 'onmouseover', Navlinkimagebubble( IMGS[iterator].id ) ) ;
IMGS[iterator].attachEvent( 'onmouseout', Unnavlinkimagebubble( IMGS[iterator].id ) ) ;
}
}
}

[boojum]

below is the file as i have it now, its in a .js file called by this in the html:
<script type='text/ecmascript' src='js/global.js'></script>

it works but only if the tag is placed at the bottom of the body. Everything i read says to place it in the header, and thats what all example scripts i've seen do, but mine doesnt work. if it is placed in the head, nothing happens. i think it has something to do with the line:
var IMGS = document.getElementsByTagName( 'IMG' ) ;

using alerts i get IMGS[0] is undefined and IMGS[0].id is 'null or not an object'




// GLOBAL variables

/* THIS LINE HERE MAY BE THE PROBLEM */
var IMGS = document.getElementsByTagName( 'IMG' ) ;
// directory+file file type
var REGEX1 = /(.*\/\w*)(\.(?:jpg|png|gif))/i ;
// directory+file 'v' file type
var REGEX2 = /(.*\/\w*)v(\.(?:jpg|png|gif))/i ;


// ------------------------------------
// Functions


function Navlinkimagebubble( IMGSid ) {
var currentimg = document.getElementById( IMGSid ) ;
currentimg.src = currentimg.src.replace( REGEX1, '$1v$2' ) ;
}

function Unnavlinkimagebubble( IMGSid ) {
var currentimg = document.getElementById( IMGSid ) ;
currentimg.src = currentimg.src.replace( REGEX2, '$1$2' ) ;
}


// ------------------------------------
// script


if ( document.addEventListener ) {
for ( iterator = 0; iterator < IMGS.length; iterator++ ) {
if ( IMGS[iterator].className == 'navlinkimage' ) {
IMGS[iterator].addEventListener( 'mouseover', new Function( 'return Navlinkimagebubble( "' + IMGS[iterator].id + '" );' ) ) ;
IMGS[iterator].addEventListener( 'mouseout', new Function( 'return Unnavlinkimagebubble( "' + IMGS[iterator].id + '" );' ) ) ; }
}
}

else if ( document.attachEvent ) {
for ( iterator = 0; iterator < IMGS.length; iterator++ ) {
if ( IMGS[iterator].className == 'navlinkimage' ) {
IMGS[iterator].attachEvent( 'onmouseover', new Function( 'return Navlinkimagebubble( "' + IMGS[iterator].id + '" );' ) ) ;
IMGS[iterator].attachEvent( 'onmouseout', new Function( 'return Unnavlinkimagebubble( "' + IMGS[iterator].id + '" );' ) ) ;
}
}
}

[boojum]

i know i am using the following...

if ( document.addEventListener ) {
document.body.addEventListener( 'load', Addevents, false) ;
}
else if ( document.attachEvent ) {
document.body.attachEvent( 'onload', Attachevents) ;
}

...incorrectly but i dont know what is incorrect. all i can say is nothing happens, no working javascript and no errors, if
<script type='text/ecmascript' src='js/global.js'></script>
is placed just before the end of the body. the error 'document.body is null or not an object' occurs if the script tag is placed in the header. the entire script follows:


// GLOBAL variables


// directory+file file type
REGEX1 = /(.*\/\w*)(\.(?:jpg|png|gif))/i ;
// directory+file 'v' file type
REGEX2 = /(.*\/\w*)v(\.(?:jpg|png|gif))/i ;

// ------------------------------------
// Functions


function Addevents( ) {
for ( var iterator = 0; iterator < document.images.length; iterator++ ) {
if ( document.images[iterator].className === 'navlinkimage' ) {
document.images[iterator].addEventListener( 'mouseover', new Function( 'return Navlinkimagebubble( ' + iterator + ' ) ;' ), false ) ;
document.images[iterator].addEventListener( 'mouseout', new Function( 'return Unnavlinkimagebubble( ' + iterator + ' ) ;' ), false ) ;
}
}
}

function Attachevents( ) {
for ( var iterator = 0; iterator < document.images.length; iterator++ ) {
if ( document.images[iterator].className === 'navlinkimage' ) {
document.images[iterator].attachEvent( 'onmouseover', new Function( 'return Navlinkimagebubble( ' + iterator + ' ) ;' ) ) ;
document.images[iterator].attachEvent( 'onmouseout', new Function( 'return Unnavlinkimagebubble( ' + iterator + ' ) ;' ) ) ;
}
}
}

function Navlinkimagebubble( iterator ) {
document.images[iterator].src = document.images[iterator].src.replace( REGEX1, '$1v$2' ) ;
}

function Unnavlinkimagebubble( iterator ) {
document.images[iterator].src = document.images[iterator].src.replace( REGEX2, '$1$2' ) ;
}


// ------------------------------------
// initialisation


if ( document.addEventListener ) {
document.body.addEventListener( 'load', Addevents, false) ;
}
else if ( document.attachEvent ) {
document.body.attachEvent( 'onload', Attachevents) ;
}