我网页上的 JavaScript 在 IE 9 中不起作用有什么原因吗?

Is there a reason the JavaScript on my webpage doesn't work in IE 9?

本文关键字：什么 不起作用 网页 JavaScript IE      更新时间：2023-09-26

我写这个页面是为了成为一个图片库。当您将鼠标悬停在图片上时，它会显示该图像的较大版本。当您单击其中一个较小的图像时，其上方的较大图片应更改为该图像。它在Chrome和Firefox中运行良好，但由于某种原因，大照片在IE9中不会改变。有什么想法吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text/Photo Swap Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--Everything below this comment (function switch1) is completely questionable. What IS this stuff?-->//The switchImg function is what swaps out the awesome.png picture when thumbnails are clicked.
function switchImg(i){
document.images["awesome"].src = i;
}
</script>
<style>
<!--NEEDS TO BE FIXED-->
<!--This uses the picture in the URL as a background image, needs to be fixed to stretch across whole page; use %'s.-->
body {background: url('gradient.png');}
<!--This is all gallery stuff. Makes it all a certain size, floats it to the left, pads the images, makes the images appear in a span while the mouse
is hovering over it (might be taked out and replaced with JavaScript).-->
#gallery {position: relative; }
#gallery ul {list-style-type: none;
width: 300px; }
#gallery li { display: inline; 
 float: left;
 padding: 5px; }
#gallery img {border-style: solid: 10px; border-color: #333; }
#gallery a { text-decoration: none;
         font-style: none;  
         color: #333; }
#gallery span {display: none; }
#gallery a:hover span {display: block;     
position: absolute;
top: 10px;
left: 300px; 
text-align: center; }
<!--NEEDS TO BE FIXED-->
<!--What does this do? Excellent question, my fine sir. This tries to float the image that changes on click to the right. -->   
#mainPicture {
float: right;
    }
<!-- <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=>-->
.popOut
{
cursor: default;
list-style: none;
}
.popOut a
{
cursor: default;
}
.popOut a .preview
{
display: none;
}
.popOut a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.popOut img
{
background: #ebf0f3;
border-color: #ebf0f3;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 100px;
height: 75px;
}
.popOut li
{
background: #ebf0f3;
border-color: #CCCCCC;
border-style: solid;
border-width: 0px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 2px;
position: relative;
}
.popOut .preview
{
border-color: #000;
width: 200px;
height: 150px;
}
.popOut p
{
text-align: center;
}
.popOut .textualLink
{
}
</style>
</head>
<body>
<!--NEEDS TO BE FIXED-->
<!--Give the awesome picture a similar outline to the preview pictures.-->
<!--This picture is the one that is going to change when pictures are clicked on.-->
<div class="mainPicture"><img id="awesome" src="awesome.png" height="300" width="400" alt=""><!--style="position:relative; left:600px; top:326px;"--></div>
<!--Alright, so this gallery is to hold all of the pictures. They're all set to be a certain size (100x75px) and expand to a larger size(400x300px). As it stands now, 
they're in an unordered list, and are set to change the awesome.png image whenever they are clicked.-->
<td width="1000" rowspan="3">
<div id="gallery">
<ul class="popOut">
    <li>
        <a href="#" onclick="switchImg('dog.jpg')"> 
            <img src="dog.jpg" width="100" height="75" alt="dog"><img src="dog.jpg" width="100" height="75" alt="dog" class="preview"> 
        </a>
    </li>
    <li>
        <a href="#" onclick="switchImg('cat.jpg')"> 
            <img src="cat.jpg" width="100" height="75" alt="cat"><img src="cat.jpg" width="100" height="75" alt="cat" class="preview"> 
        </a>
    </li>
    <li>
        <a href="#" onclick="switchImg('parrot.jpg')">
            <img src="parrot.jpg" width="100" height="75" alt="parrot"><img src="parrot.jpg" width="100" height="75" alt="parrot" class="preview"> 
        </a>
    </li>
    <li>
        <a href="#" onclick="switchImg('lizard.jpg')"> 
            <img src="lizard.jpg" width="100" height="75" alt="lizard"><img src="lizard.jpg" width="100" height="75" alt="lizard" class="preview"> 
        </a>
    </li>
    <li>
        <a href="#" onclick="switchImg('horse.jpg')">
            <img src="horse.jpg" width="100" height="75" alt="horse"><img src="horse.jpg" width="100" height="75" alt="horse" class="preview"> 
        </a>
    </li>
    <li>
        <a href="#" onclick="switchImg('chicken.jpg')"> 
            <img src="chicken.jpg" width="100" height="75" alt="chicken"><img src="chicken.jpg" width="100" height="75" alt="chicken" class="preview"> 
        </a>
    <li>
        <a href="#" onclick="switchImg('awesome.png')" class="textualLink"><p>Click for Default Image</p></a>
    </li>
</ul>
<!--This textarea is the field where information about whatever is clicked will pop up, and hopefully stay there. By default, it should contain some sort of welcome message.-->
<div id="textarea" style="height:600px;width:320px;font:14px;font:14px/26px Arial, Helvetica, sans-serif;overflow:scroll; position:relative;
top:12px;"><p id="textarea2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pulvinar lectus non lectus auctor egestas. Donec at nunc neque. Morbi ornare condimentum lobortis. Nam vehicula urna ac mauris pharetra rutrum. Duis et arcu eget sapien interdum porttitor ut et tortor. Maecenas ultricies dignissim pretium. Integer quis enim metus. Sed enim lacus, eleifend eu euismod volutpat, blandit eu sem. Vestibulum varius purus ut est accumsan pellentesque. Donec quis enim id lectus sollicitudin suscipit at volutpat augue. Curabitur et metus purus. Fusce luctus nunc vitae sapien pharetra id accumsan lectus malesuada.</p></div>
</div>
</td>
</body>
</html>

请改用此switchImg函数：

function switchImg(i){
    document.getElementById("awesome").src = i;
}

我不认为IE9支持document.images但我可能是错的。

将

函数更改为：

function switchImg(i){
    document.getElementById("awesome").src = i;
}
相关文章：