Question

我把这个页面写成图像库。将鼠标悬停在图片上时，会显示较大版本的图片。单击其中一个较小的图像时，其上方的较大图片应更改为该图像。它在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>

Answer 1

请改用此switchImg功能：

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

我认为IE9不支持document.images，但我可能错了。

Answer 2

将您的功能更改为：

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

我的网页上的JavaScript无法在IE 9中运行吗？

2 个答案: