我的网页上的JavaScript没有'；你不在IE9工作吗？
我写这个页面是为了成为一个图像库。当您将鼠标悬停在图片上时，它会显示该图像的较大版本。当您单击其中一个较小的图像时，上面的较大图像应更改为该图像。它在Chrome和Firefox中运行良好，但由于某些原因，IE9中的大图不会改变。有什么想法吗我的网页上的JavaScript没有'；你不在IE9工作吗？,javascript,html,internet-explorer,onclick,image-replacement,Javascript,Html,Internet Explorer,Onclick,Image Replacement,我写这个页面是为了成为一个图像库。当您将鼠标悬停在图片上时，它会显示该图像的较大版本。当您单击其中一个较小的图像时，上面的较大图像应更改为该图像。它在Chrome和Firefox中运行良好，但由于某些原因，IE9中的大图不会改变。有什么想法吗 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <he
<!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函数是在单击缩略图时交换awesome.png图片的功能。
功能开关img（i）{
document.images[“awesome”].src=i；
}
正文{background:url（'gradient.png'）；}
#库{位置：相对；}
#库ul{列表样式类型：无；
宽度：300px；}
#画廊展示：内联；
浮动：左；
填充：5px；}
#画廊图片{边框样式：纯色：10px；边框颜色：#333；}
#画廊a{文字装饰：无；
字体样式：无；
颜色：#333；}
#库span{显示：无；}
#画廊a：悬停{显示：块；
位置：绝对位置；
顶部：10px；
左：300px；
文本对齐：居中；}
#主要图片{
浮动：对；
}
popOut先生
{
游标：默认值；
列表样式：无；
}
.弹出一个
{
游标：默认值；
}
.弹出a.预览
{
显示：无；
}
.popOut a:悬停。预览
{
显示：块；
位置：绝对位置；
顶部：-33px；
左：-45px；
z指数：1；
}
.popOut img
{
背景：#ebf0f3；
边框颜色：#ebf0f3；
边框样式：实心；
边框宽度：1px；
颜色：继承；
垂直对齐：顶部；
宽度：100px；
高度：75px；
}
李先生
{
背景：#ebf0f3；
边框颜色：#中交；
边框样式：实心；
边框宽度：0px；
颜色：继承；
显示：内联；
浮动：左；
保证金：3倍；
填充：2px；
位置：相对位置；
}
.popOut.preview
{
边框颜色：#000；
宽度：200px；
高度：150像素；
}
.popOut p
{
文本对齐：居中；
}
.popOut.textualLink
{
}
-
-
-
-
-
-
-
Lorem ipsum Door sit amet，是一位杰出的体育精英。目的：探讨枕上直肌与非枕上直肌之间的关系。努克内克的顿涅克。Morbi ornare lobortis调味品。Nam vehicula urna ac mauris pharetra rutrum。两个和两个之间的智囊团。前贵族。整数基斯·伊尼姆·梅特斯。Sed enim lacus、eleifend eu euismod OVERLAPAT、blandit eu sem。化脓性前庭静脉曲张是一种累赘。在奥古斯都的奥古斯都，他是一位独裁者。库拉比图尔和梅特斯·普鲁斯。人类的生命是一种智慧
开关imgfunction switchImg(i){
document.getElementById("awesome").src = i;
}
我认为IE9不支持
文档.图像切换imgfunction switchImg(i){
document.getElementById("awesome").src = i;
}
我认为IE9不支持
文档.图像function switchImg(i){
document.getElementById("awesome").src = i;
}
将您的功能更改为：
function switchImg(i){
document.getElementById("awesome").src = i;
}
你试过用开发者工具在IE9中调试它吗？我在开发者工具中，但我找不到任何东西可以用.F12->Scripts->Console调试。我不使用IE9。你试过用开发人员工具在IE9中调试它吗？我在开发人员工具中，但我想找不到任何东西可以用.F12->Scripts->Console进行调试。我不使用IE9。好主意，但这使得它在任何浏览器中都无法工作。但是，我可以使用相同的功能通过单击图片来交换文本框中的文本吗？应该可以。我想你的问题可能在哪里。你的图片URL有效吗？不，兼容性应该很好，让我再检查一遍。我正在工作，所以我不能花太多时间帮助你，对不起。你确定图像的ID仍然是“很棒”的吗？这是我能想到的唯一一件可能是错误的事情。是的，你可以在文本框中使用同样的函数交换文本。对不起，那么，我没有一点线索。这是个好主意，但这使得它在任何浏览器中都不起作用。但是，我可以使用相同的功能通过单击图片来交换文本框中的文本吗？应该可以。我想你的问题可能在哪里。你的图片URL有效吗？不，兼容性应该很好，让我再检查一遍。我正在工作，所以我不能花太多时间帮助你，对不起。你确定图像的ID仍然是“很棒”的吗？这是我能想到的唯一一件可能是错误的事情。是的，你可以在文本框中使用同样的函数交换文本。对不起，那么，我没有一点线索。这是个好主意，但这使得它在任何浏览器中都不起作用。但是，我可以使用同样的功能通过单击图片来交换文本框中的文本吗？这是个好主意，但这使得它在任何浏览器中都不起作用。但是，我可以通过单击图片使用相同的功能来交换文本框中的文本吗？