innerHTML IE issues

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mboso
    #1

    innerHTML IE issues

    I have a function that works in firefox, but is having some issues in
    IE. What it does is place an image in a specified cell, when an icon in
    the adjacent cell is clicked. I have to click the link half a dozen
    times for the full size image to load in the adjacent cell. It appears
    to load %20 of the image then stops. In firefox, I click once and it
    works. any ideas?

    Here is the offending code, and well at the HTML. I don't know if it
    matters, but I put all my javascript functions in a separate file.

    function changeContent(i d,shtml) {
    if (document.getEl ementById || document.all) {
    var repl = document.getEle mentById? document.getEle mentById(id):
    document.all[id];
    if (repl && typeof repl.innerHTML != "undefined" ) repl.innerHTML
    = shtml;
    }
    }

    var s1='<img src="images/large/scan0001_c.jpg" >'
    var s2='<img src="images/large/scan0002_c.jpg" >'
    var s3='<img src="images/large/scan0003_c.jpg" >'
    var s4='<img src="images/large/scan0004_c.jpg" >'
    var s5='<img src="images/large/scan0005_c.jpg" >'
    var s6='<img src="images/large/scan0006_c.jpg" >'

    *************** **********

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>

    <title>Sheila Turner</title>

    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">

    <script language="javas cript" type="text/javascript"
    src="../../scripts/generate_addres s_script.js"></script>
    <link href="../../css/style.css" rel="stylesheet " media="all"
    type="text/css" title="Main stylesheet">
    </head>

    <body>

    <div align="center" id="padtable">
    <table id="frametable" >
    <tr>
    <td id="rtd">
    Sheila Turner
    </td>

    <td>
    <div id="vericons1"> <a href="javascrip t:;"
    onclick="change Content('rtd',s 1)"><img
    src="images/small/scan0001_i_sq.j pg"></a></div>
    <div id="vericons"> <a href="javascrip t:;"
    onclick="change Content('rtd',s 2)"><img
    src="images/small/scan0002_i_sq.j pg"></a></div>
    <div id="vericons">< a href="javascrip t:;"
    onclick="change Content('rtd',s 3)"><img
    src="images/small/scan0003_i_sq.j pg"></a></div>
    <div id="vericons">< a href="javascrip t:;"
    onclick="change Content('rtd',s 4)"><img
    src="images/small/scan0004_i_sq.j pg"></a></div>
    <div id="vericons">< a href="javascrip t:;"
    onclick="change Content('rtd',s 5)"><img
    src="images/small/scan0005_i_sq.j pg"></a></div>
    <div id="vericons">< a href="javascrip t:;"
    onclick="change Content('rtd',s 6)"><img
    src="images/small/scan0006_i_sq.j pg"></a></div>
    </td>

    </tr>
    </table>
    </div>
    </body>
    </html>

    Tags: None
    • Randy Webb
      #2
      Re: innerHTML IE issues

      mboso wrote:[color=blue]
      > I have a function that works in firefox, but is having some issues in
      > IE. What it does is place an image in a specified cell, when an icon in
      > the adjacent cell is clicked.[/color]

      No, what it does is change the innerHTML of a specified cell. It is far
      more efficient (and cross-browser) to simply change the source of the image.
      [color=blue]
      > I have to click the link half a dozen times for the full size image
      > to load in the adjacent cell. It appears to load %20 of the image then
      > stops. In firefox, I click once and it works. any ideas?[/color]

      Give your image a name attribute, change its .src property via the
      document.images collection.
      [color=blue]
      >
      > Here is the offending code, and well at the HTML. I don't know if it
      > matters, but I put all my javascript functions in a separate file.
      >
      > function changeContent(i d,shtml) {
      > if (document.getEl ementById || document.all) {
      > var repl = document.getEle mentById? document.getEle mentById(id):
      > document.all[id];
      > if (repl && typeof repl.innerHTML != "undefined" ) repl.innerHTML
      > = shtml;
      > }
      > }
      > var s1='<img src="images/large/scan0001_c.jpg" >'
      > var s2='<img src="images/large/scan0002_c.jpg" >'
      > var s3='<img src="images/large/scan0003_c.jpg" >'
      > var s4='<img src="images/large/scan0004_c.jpg" >'
      > var s5='<img src="images/large/scan0005_c.jpg" >'
      > var s6='<img src="images/large/scan0006_c.jpg" >'[/color]

      var imageList = new Array()
      imageList[1]='scan0001_c.jp g';
      imageList[2]='scan0002_c.jp g';
      imageList[3]='scan0003_c.jp g';
      imageList[4]='scan0004_c.jp g';
      imageList[5]='scan0005_c.jp g';
      imageList[6]='scan0006_c.jp g';

      var path = 'images/large/';

      function changeImage(new Image){
      if (document.image s){
      document.images['myImage'].src = path + imageList[newImage];
      }
      }

      And then have your html as such:

      <img src="something. jpg" name="myImage". ....>

      And then your links look something like this:

      <a href="noJS.html "
      onclick="change Image('');retur n false">
      Change the Image</a>



      --
      Randy
      comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

        Comment

        Previous template Next
        Working...