Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

javascript - HTML loadImage.onload behaves different for IE8 and Firefox/Chrome

Avatar of christiaan
christiaan asked on
HTMLJScript
6 Comments1 Solution1385 ViewsLast Modified:
I've got a simple HTML calling the function album()
<html><head></head><body><script>
<!--
album ();
//-->
</script>
</body></html>


/*
The intention is to have the following table, displaying pictures of a list in centre34, while
the size of each picture is maximized, without need for scrolling
a hoovering mouse allows to click forward or reverse
To debug I used a trick to show every line-number that is processed
 
It works fine  in Mozilla and Chrome, where the sequence is followed as wanted:
1. set-up table
2. call setPicture()
 2.1 call displayJPG ()
   2.1.1 setSize (); (actuallay run)
    2.1.1.1 definemaxSizesOfPic()
    2.1.1.2 calculate sizes
    2.1.1.3 set usemap and picture in right size (cannot see that actually happening, but the line numbers appear all)
   2.1.2 set usemap and test-picture for right-sizing
3. html level is ready now => executed and thus triggers setPicture, loading the image (as per line 88 or 122)
4. setPicture executed and when hoovering the showNext and showPrev work, when clicking the next or previous picture is shown


In IE8 however, the steps 2.1.1.1 - 2.1.2 are skipped and the result is that the incorrect usemap is loaded. Apparently the javascript instruction loadImage.onload = setSize () makes the routine jump back to HTML level.

I would like to find out what the difference is between IE8 and the others with respect to the behavior here.

*/


/*
* ------------------------------------------------------------------------------------
* || left1 (labels)        ||     center1 (Region and Date) || right1 (up-links)   ||
* || < marginWidth >  ||                                                 || < marginWidth >  ||
* ------------------------------------------------------------------------------------
* ||                  center2 (Picture Place and Description)                            ||
* -----------------------------------------------------------------------------------
* || left3 (previous)   ||                                                  || right3 (next)       ||
* ----------------------||   center34 (Region and Date)   ||----------------------
* || left4 (linklist) ||                                                         ||  right4  (linklist)  ||
* ---------------------------------------------------------------------------------
* || left5 (filedate) ||       center5 (Webstat)                   || right5  (???)       ||
*  ------------------------------------------------------------------------------------
*/

function album()
{
//      set-up of the above sketched table
//      conversion of a list of filenames with a specific format to an array of data
             * example filename: yyyy-mm-dd Region,nnnn,Place!description.ext

          setPicture ();
}


function setPicture()      //uses global picNr
{
      //ensure picture number inside series
      if ( picNr > lastOfPics) { picNr = 0}
      else if ( picNr < 0) {picNr = lastOfPics}
      //check and react on picture type
      if (listOfPictureTypes[ picNr ] == "jpg") {displayJPG();return true;};
      if (listOfPictureTypes[ picNr ] == "swf") {displaySWF();return true;};
}



function displayJPG ()       //uses global picNr
{

  loadImage.src = listOfPictures[ picNr ];
  loadImage.name = listOfPictures[ picNr ];
  loadImage.onload = setSize ();                  //setSize is executed here

    useMap = "<Area " +
      "onClick = 'nextPicture();return true;'" +
      "onMouseOver = 'showNext ();return true;'" +
      "onMouseOut  = 'showBlank();return true;'" +
      "SHAPE='rect' COORDS='" + maxWidthOfPic * 3/4 + ",0," + maxWidthOfPic + "," + maxHeightOfPic +
      "' HREF='#top' Title='Next Picture'>" +
      "<Area " +
      "onClick = 'prevPicture();return true;'" +
      "onMouseOver = 'showPrev ();return true;'" +
      "onMouseOut  = 'showBlank()';return true;'" +
      "SHAPE='rect' COORDS='0,0," + maxWidthOfPic * 1/4 + "," + maxHeightOfPic +
      "' HREF='#top' Title='Previous Picture'>";


//load small picture in window to get its size
      document.getElementById('center34').innerHTML = "<img src='" + loadImage.src +
      "' onload='setSize();return true;'" +
      " width='20'>";

      document.getElementById('left1').innerHTML =   text1;
      // etc. for all other cells
}


function setSize()       //actual width and height of the picture and maximum width and height of the window
{
      // 1. determine the actual maximum sizes of center34, the cell where the picture is displayed
      //maxWidthOfPic and maxHeightOfPic
      definemaxSizesOfPic();  //calculates the maximum width and heightin "center34" (maxWidthOfPic and maxHeightOfPic)
      
      // 2. determine the own size (width and height) of the picture
      widthOfPic = widthOfDisplayedPic = loadImage.width;
      heightOfPic = heighthOfDisplayedPic = loadImage.height;
      if (widthOfDisplayedPic > maxWidthOfPic)
      {
            widthOfDisplayedPic = maxWidthOfPic;
            heighthOfDisplayedPic = heightOfPic * widthOfDisplayedPic/widthOfPic;
      }
      if (heighthOfDisplayedPic > maxHeightOfPic)
      {
            heighthOfDisplayedPic = maxHeightOfPic;
            widthOfDisplayedPic = widthOfPic * heighthOfDisplayedPic/heightOfPic
      }

// display the picture in the right size
      document.getElementById('center34').innerHTML = "<map id='mymap' name='nav-map'>"+ useMap + "</map>"+
      "<div  style='position: relative;" +
      "top: 0px; height: " + maxHeightOfPic + "px; width:" +  maxWidthOfPic + "' >" +
      //the Picture
      "<IMG style='z-index: 0;position: relative;top: 0px;left: 0px' iD='thepicture' SRC='" +
      loadImage.src + "' BORDER=0 " +
      "width ='" + widthOfDisplayedPic +
       "'>" +
      //the navigation Arrows
      "<IMG style='z-index: 1;position: absolute;top: 0px;left: 0px' iD='arrows' SRC='FW-RW-blank.gif'" +
      "BORDER=0 USEMAP='#nav-map' alt='Blank'" +
      "width ='" + maxWidthOfPic + "' height ='" + maxHeightOfPic + "'>" +
      "</div>";extraInfoDisplay (" - 316 - last of setSize: small picture loaded");
}
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Commented:
This problem has been solved!
Unlock 1 Answer and 6 Comments.
See Answers