short and simple rollover javascript does not run in IE . . assist please . .

boutiquehealth · #1 (**permalink**) 03-27-09, 05:28 AM

Dear Mr Wizard and Javascript Champions,

This rollover javascript runs well in safari, firefox, chrome . . but not at all in IE 6 and 7 ( 8 is untested, for now ) . .

Sure would appreciate a little luv . .

- -

Code:

function rollover() {
  if (!document.getElementById) return
  var imgOrSrc;
  var imgPreload = new Array();
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    if (images[i].getAttribute('rsrc')) {
      imgPreload[i] = new Image();
      imgPreload[i].src = images[i].getAttribute('rsrc');
      images[i].onmouseover = function() {
        imgOrSrc = this.getAttribute('src');
        this.setAttribute('src',this.getAttribute('rsrc'))
      }
      images[i].onmouseout = function() {
        this.setAttribute('src',imgOrSrc)
      }
    }
  }
}

- -

In use one just adds

Code:

rsrc=". . ."

alongside the usual

Code:

src=". . ."

and much is visually accomplished with the image altering affect . .

By now my javascript ignorance is glaringly obvious . . a little slack please . .

sincerely yours
boutiquehealth

TwoD · #2 (**permalink**) 03-30-09, 09:20 PM

I can't test this atm, but I don't see why it shouldn't work in IE. Are there any errors?

(I've noticed that using set/getAttribute might sometimes cause weird problems.)

boutiquehealth · #3 (**permalink**) 05-07-09, 12:06 AM

07.05.09 :: 16:59 hours ( nzst )

Dear Gentlemen and Ladies

Thank you for your contributions to date .

My apology for the lateness of response .

Here is the solution applied .

Code:

function rollover() {
  if (!document.getElementById) return
  var imgOrSrc;
  var imgPreload = new Array();
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    if (images[i].getAttribute('rsrc')) {
      imgPreload[i] = new Image();
      imgPreload[i].src = images[i].getAttribute('rsrc');
      images[i].onmouseover = function() {
        imgOrSrc = this.getAttribute('src');
        this.setAttribute('src',this.getAttribute('rsrc'))
      }
      images[i].onmouseout = function() {
        this.setAttribute('src',imgOrSrc)
      }
    }
  }
}

if (window.addEventListener)
 window.addEventListener('load', rollover, false);
else if (window.attachEvent)
 window.attachEvent('onload', rollover);

The described rollover script is now operating properly in the IE browser ( 6, 7 and 8 ) .

Existing browsers; Safari, Google, Firefox continue to display rollover images - as before .

My further apology for completely forgetting and omitting to mention the separate piece of code included in the body tag .

The body tag at time of non-operation . .

Code:

<body id="page-index" onLoad="rollover()">

The body tag has therefore been updated to . .

Code:

<body id="page-index">

where the

Code:

onLoad="rollover()"

instruction has been properly removed in favour of the revised script fully showing above .

An inexcusable error that may have hindered any proposed solutions to come. Sorry.

The solution to the problem is apparently more than one 'onload' function was co-operating at the website.

A feat insurmountable to IE browser . . but of no apparent operating matter to the other three browsers .

The initially described rollover javascript was indeed able to run and surely does in the Safari, Google and Firefox browsers but was not able to run against another 'onload' instruction from elsewhere in the site code by IE browser .

The updated script is now fully operational and more compatible with more websites and browsers .

Thank you everyone for your contributions .

Yours Sincerely
stuart - boutiquehealth