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

[boutiquehealth]

Dear Mr Wizard and Javascript Champions,

We use several dynamic drive javascripts to great and satisfying effect in most browsers and including IE 6+, thank you.

And this rollover javascript ( source unknown ) 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 . .

- -

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

rsrc=". . ."

alongside the usual

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

[jscheuer1]

The script code works OK here in IE 7. However, this script won't do anything unless it is run after the browser parses the image tags on the page. That could be the problem. IE doesn't use the:

window.addEventListener()

method that is often employed to help in running code on page load.

Or there could be some other problem:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[boutiquehealth]

Saturday 19:27 hours nzst

Dear John

Thank you, John, for your kind invitation and most helpful offer of assistance . . very much appreciated . .

Please forgive our ( my ) very late response . . my excuses are feeble and developmental ( a never ending journey ) . . here is the link to the troubled web-site . . and please do excuse the ( my ) spaghetti coding content contribution . .

http://www.boutiquehealth.co.nz

The site is a shopify ( www.shopify.com ) cms site built with Ruby on Rails, persisted by MySQL, served by Nginx and secured by OpenBSD in a closed proprietary cms . . and frankly my clumsy attempts to stretch beyond the available cms limitations met in the existing shopify cms account have run us off the road a good many times . .

Breaking the site has been a personal favourite past-time as we try to leverage the most out of the available account resources . . On the other hand . . the all-in-one integrated service and back-end "office" features are really quite useful . . and basic automatic seo too . .

We have placed the script directly in the head area of the theme page for the shopify original theme to no good or different effect and we have uploaded the script as .js filename and properly referenced the script according to the shopify cms specs also to no good effect . . Either way, the rollover script delivers in the following browsers as personally tested by us ( me ) . . chrome ( windows ), firefox 2 and 3 ( windows and mac ), safari 3 ( window and mac ) . . and does not deliver in IE 6 and 7 ( 8 is untested for now ) . .

The problem appears to be ( however one looks at the challenge ) IE browser incompatibility . . but we do not discount a possible conflict among scripts that again is relevant to IE alone . .

The site operates mostly as expected and we have troubled ourselves to encourage users to explore their browsing options with an affirmation of browser compatibilities that is only visible to IE browser users . .

To be sure we are good and done with IE drama and do appreciate the weight of quality delivered by the alternative browser providers satisfactorily confirms the IE browser to be a continuing problematical development target . .

We have done too much work to pull the script in favour of another and have already accepted that we may not find adequate solution to the problem . . hence ( partly ) the IE browser user only 'heads-up' content . . and as mac users who have defected from microsoft drama about 10 years ago we are well aware that larger web compatibility and computing quality is truly available elsewhere . . By now, our ( my ) biases, prejudices, and descriminations are abundantly obvious . . we mean no disrespect to windows users - none at all . . Windows 7 is looking like a winner ( we operate an xp machine here for testing and it goes and goes ) and we have vista here too ( and it goes and goes ) but the browser favoured is firefox ( v3 ) - which looks fabulous on the mac . . Looking forward to seeing the new Zune HD too in our parts some-time in the future . .

You may have questions - we do have answers . . or will get you answers as you may require . .

We admit to being just plain dumb about things web ( just look at the page source ) but we are able to follow instructions and are happy to experiment . . web development has been an interesting experience but it ain't quite where we are aiming to be and where we should be mostly focused . .

A link you will see to another of our websites is all free-code non-cms page by page development with experimental ( not bleeding edge ) coding content from many different resources and for sure from you at dynamic drive too . . And the rollover script operating on those pages is from another provider . . a different rollover script . .

However you are able to assist we are glad to participate . .

for now,

Much obliged

Yours Most Sincerely
Stuart - boutiquehealth

[jscheuer1]

After looking at the page, I'm surprised it works in any browser. Here, is where it is activated:

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

However, that tag appears in an invalid spot in your document. Apparently this is not messing up other things but has two problems as far as the rollover script goes.

1. The body actually starts here (by implication - the head is closed and a tag which belongs in the body appears):
   
   

    . . . ttp://static2.shopify.com/s/files/1/0004/7391/assets/AC_OETags.js?1239528441" type="text/javascript"></script>
   <script src="http://static0.shopify.com/s/files/1/0004/7391/assets/pageear.js?1239528441" type="text/javascript"></script>
   
   <script src="http://static0.shopify.com/s/files/1/0004/7391/assets/rollover.js?1239528441" type="text/javascript"></script>
   
   </head>
   <table style="border-top: 2px solid rgb(243, 217, 1); border-bottom: 2px solid rgb(243, 217, 1); font-family: Verdana; font-size: 14px; font-weight: normal; color: rgb(0, 102, 204); padding-bottom: 5px; padding-top: 5px; background-color: rgb(255, 255, 153); width: 100%; margin-left: auto; margin-right: auto;" cellpadding="0" cellspacing="0">
   <tbody>
   <tr>
   <td style="text-align: center; vertical-align: middle;">BoutiqueHealth
   Specials available&nbsp;on
   trademe → <a title="Opens in fresh new tab or window »" rel="me" target="_blank" href="http://www.trademe.co.nz/Members/Listings.aspx?member=360635&amp;v=Gallery&amp;Y=0">click
   here for a maximum deep discount offer</a> <span style="color: rgb(204, 0, 0); font-weight: bold;">&raquo;</span></td>
   </tr>
   </tbody>
   </table>
   
   <body id="page-index" onLoad="rollover()">
   
   <div id="header">
   	<div class="co . . .

2. There is another onload function:
   
   

   function () {
       if (_c) {
           _c();
       }
       _b();
   }

   This overwrites the body onload. But since we cannot really tell what it does, it may somehow include the rollover() function in other browsers.
   

In any case, all should be fine if you get rid of the body onload call, and add (highlighted) to your rollover.js file:

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

[boutiquehealth]

07.05.09 :: 16:50 hours ( nzst )

Dear John

Thank you .

Coding horror mention acknowledged .

Your provided solution now also delivers rollover image to the IE browser ( 6, 7 and 8 ) .

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

Much appreciated . . much obliged .

Yours Sincerely
stuart - boutiquehealth

< donation complete - momentarily >