Question

我有一个画廊，显示在＆＃34; mouseover＆＃34;。它会在屏幕中央放大缩略图。这是通过JavaScript完成的。

问题是它适用于IE，但不适用于Chrome。

以下是代码：

＆＃13;

<center>
  <a name="whenCara">
  </a>
  <table>
    <tr>
      <td>
        <fieldset id="javaScriptSet">
          <legend>
            <img src="Images/gallery.png">
            </img>
          </legend>
          <div class="preview" align="center">
            <img id="preview" src="Images2/1.jpg" alt="No Image Loaded"/>
          </div>
          <br>
          <div class="thumbnails">
            <label>
              <img onmouseover="preview.src=img1.src" id="img1" src="Images2/1.jpg" alt="Image Not Loaded"/>
            </label>
            <img onmouseover="preview.src=img2.src" id="img2" src="Images2/2.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img3.src" id="img3" src="Images2/3.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img4.src" id="img4" src="Images2/4.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img5.src" id="img5" src="Images2/5.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img6.src" id="img6" src="Images2/6.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img7.src" id="img7" src="Images2/7.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img8.src" id="img8" src="Images2/8.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img9.src" id="img9" src="Images2/9.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img10.src" id="img10" src="Images2/10.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img11.src" id="img11" src="Images2/11.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img12.src" id="img12" src="Images2/12.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img13.src" id="img13" src="Images2/13.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img14.src" id="img14" src="Images2/14.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img15.src" id="img15" src="Images2/15.jpg"     alt="Image Not Loaded"/>
      </div>
        <br>
    </fieldset>
    </center>
  </td>
</tr>
</table>

＆＃13;

Answer 1

您正在关闭错误位置的标签。 IE忽略了这一点，但Chrome没有（未经测试）。

注意最后一节：

错：

    </center>
  </td>
</tr>
</table>

右：

  </td>
</tr>
</table>
    </center>

以下是应该运行的代码：

<center>
  <a name="whenCara">
  </a>
  <table>
    <tr>
      <td>
        <fieldset id="javaScriptSet">
          <legend>
            <img src="Images/gallery.png" />
          </legend>
          <div class="preview" align="center">
            <img id="preview" src="Images2/1.jpg" alt="No Image Loaded"/>
          </div>
          <br>
          <div class="thumbnails">
            <label>
              <img onmouseover="preview.src=img1.src" id="img1" src="Images2/1.jpg" alt="Image Not Loaded"/>
            </label>
            <img onmouseover="preview.src=img2.src" id="img2" src="Images2/2.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img3.src" id="img3" src="Images2/3.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img4.src" id="img4" src="Images2/4.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img5.src" id="img5" src="Images2/5.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img6.src" id="img6" src="Images2/6.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img7.src" id="img7" src="Images2/7.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img8.src" id="img8" src="Images2/8.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img9.src" id="img9" src="Images2/9.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img10.src" id="img10" src="Images2/10.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img11.src" id="img11" src="Images2/11.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img12.src" id="img12" src="Images2/12.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img13.src" id="img13" src="Images2/13.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img14.src" id="img14" src="Images2/14.jpg" alt="Image Not Loaded"/>
            <img onmouseover="preview.src=img15.src" id="img15" src="Images2/15.jpg"     alt="Image Not Loaded"/>
      </div>
        <br>
        </fieldset>
      </td>
    </tr>
  </table>
</center>

Answer 2

删除评论的上一张海报是正确的。

在Chrome中，我必须使用getElementById，因此正确的语法是：

onmouseover="document.getElementById('preview').src=document.getElementById('img15').src"

Answer 3

更快更整洁的解决方案：

onmouseover="document.getElementById('preview').src=this.src"

JavaScript Mouseover库可在IE中使用，但不适用于Chrome

3 个答案: