Question

我正在尝试使用JavaScript交换图像。我有一个主要内容区域加载一个图像。我有一个带有链接列表的侧边栏，我想使用JavaScript来更改每个链接的图像。这是我目前的代码：

<html>
<head>
<title>Rat Dog Inc. ~ Services</title>
<script type="text/javascript">
var myImg;
var myImage= [];
myImage[0] = "../images/rd_surf_large.jpg";
myImage[1] = "../images/laundry.png";
myImage[2] = "../images/tug-o-war.png";
myImage[3] = "../images/cuddlepuppy.png";
myImage[4] = "../images/rd-howling.mp4";
function displayImg(){
    document.getElementById('myImage[]');
    }
</script>
</head>
<body>
<div id="main">
    <img src="../images/rd_surf_large.png"  alt="Rat Dog Inc." id="myImg"/>
</div>
<div id="sidebar">
  <h2>Rat Dog Inc. Most Popular Services</h2>
    <ul>
      <li><a href="#" onClick="displayImg(myImage[0]);">Surfing Lessons</a>       <span style="font-size: 12px">(img)</span></li>
      <li><a href="#" onClick="displayImg(myImage[1]);">Laundry Folding</a>  <span style="font-size: 12px">(img)</span></li>
      <li><a href="#" onClick="displayImg(myImage[2]);">Tug-O-War Arm Workouts</a> <span style="font-size: 12px">(img)</span></li>
      <li><a href="#" onClick="displayImg(myImage[3]);">Cuddling</a> <span style="font-size: 12px">(img)</span></li>
      <li><a href="#" onClick="displayImg(myImage[4]);">Howling Lessons</a>       <span style="font-size: 12px">(video)</span></li>
    </ul>
</div>

Answer 1

请尝试使用getElementById的这种方法

例如：

<img id="image" src="image1.jpg">
<button onclick="changeToImage2('image')">Image 2</button>
<script>
function changeToImage(id) {
    var myImage = document.getElementById(id);
    myImage.src = "image2.jpg";
}
// then create other buttons and other functions to change the image.
</script>

Answer 2

确定。所以这就是交易。当您将图像放在页面上时，如下所示：

<img src="image1.jpg" id="myImage">

我们分配了我的“我的图像”。它...如果我们想通过一个链接改变图像（我按一个按钮），我们使用javascript来操纵它。您只需使用以下方法：

document.getElementById()

通过我的页面在页面中找到一个元素。所以如果我们把这个按钮放在我们的页面上：

<button onclick="changeImage()">Change The Image</button>

并放置此脚本（具有changeImage（）函数）：

<script>
function changeImage(){
 var myImage = document.getElementById("myImage");
//then we change the src of the image
myImage.src="image2.jpg"
}
</script>

我们的图片将更改，我们点击按钮。

供参考，请访问http://www.htmldog.com/guides/javascript/intermediate/thedom

谢谢

Answer 3

您可以使用document.getElementById("image").src="image.png";更改元素的src标记。

虽然你正在做什么，但我建议你看看jQuery

Answer 4

您的javascript不正确。我不太清楚你是否理解它是如何运作的。

首先，您的功能不接受任何参数，但您只能提供一个参数。它会忽略这一点，因为它不知道如何处理它。

接下来，document.getElementById中的displayImg()输入错误。现在，它确实正在寻找一个带有ID＆＃34; myImage [] ＆＃34; ...的元素，其中没有。

此外，您有一个从不使用的变量（ myImg ）。你可能应该摆脱它。

再一次，我感觉到你并不真正了解javascript，或者不了解它背后的理论。如果您需要帮助，w3schools有一些很棒的教程。

使用JavaScript交换带有HTML链接列表的图像

4 个答案: