Can't get my script to work in IE, must be the "this" statement

[drstrange]

URL removed

Here is the code:

<!-- Start the MouseOver Image Enlarger -->
<script type="text/javascript">
var gallery = document.getElementById("gallery");
var images = gallery.getElementsByTagName.src("img");
YAHOO.util.Event.addListener(images, "mouseover", showImage);
  
  bigPic = document.getElementById("bigPic"); 
  
function getBigImage(image) 
{
  //return '<img src=\"" + image.replace(/t-/, "")+ "\"";
  return '<img src="'+ image.replace(/t-/, '') + '">';
  }
function showImage()
{ 
bigPic.innerHTML = getBigImage(this.src);
}
</script>
<!-- End of MouseOver Image Enlarger -->

All criticism is welcome. Thanks in advance.

[edited by: Fotiman at 8:38 pm (utc) on Jan. 22, 2009]
[edit reason] No personal URLs [/edit]

[drstrange]

Sorry, I posted a link. Its a violation of the rules. Sorry about that.

[Fotiman]

Welcome to WebmasterWorld! With regards to your question, this doesn't make any sense:
var images = gallery.getElementsByTagName.src("img");
It should be this:
var images = gallery.getElementsByTagName("img");

Also, you're accessing DOM elements that might not be ready yet. You should wrap this entire code in something that runs only when the DOM is ready. Try this:

<!-- Start the MouseOver Image Enlarger --> 
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
  var gallery = document.getElementById("gallery"); 
  var bigPic = document.getElementById("bigPic");
  var images = gallery.getElementsByTagName.("img");
  YAHOO.util.Event.on(images, "mouseover", function (e) {
    // Update bigPic
    bigPic.src = this.src.replace(/t-/, '');
  }); 
</script> 
<!-- End of MouseOver Image Enlarger -->

In that example, I'm assuming that bigPic is an <img>. Let me know if that works.

[drstrange]

It worked once, and I couldn't get it running again. I think have it though.