用HTML中的JavaScript函数更改图像的源代码

我目前正在编写一个项目，在该项目中我正在编写一个提供有关人体解剖学基本图表的网页。我目前测试的是使用Javascript功能在按下按钮时在不同图像之间动态切换的功能，以便用户最终能够在人体的不同视图之间切换。用HTML中的JavaScript函数更改图像的源代码

这是我到目前为止的代码。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script> 
      function skin() 
      { 
       document.getElementById("image").src="humanoutline.jpg"; 
      } 

      function muscle() 
      { 
       document.getElementById("image").src="humanoutline2.jpg"; 
      } 

      function organs() 
      { 
       document.getElementById("image").src="humanoutline3.jpg"; 
      } 

      function skeleton() 
      { 
       document.getElementById("image").src="humanoutline4.jpg"; 
      } 
     </script> 
    </head> 
    <body> 
     <style> 

      .button 
      { 
       background-color: green; 
       border-radius: 4px; 
       color: white; 
       padding: 15px 32px; 
       text-align: center; 
       text-decoration: none; 
       display: inline-block; 
       font-size: 16px; 
      } 
       #image 
      { 
       position:absolute; 
       width:500px; 
       height:700px; 
       z-index: 0; 
       top: 30%; 
       left: 45%; 
       padding:50px; 
       margin: -100px 0 0 -200px; 
       text-align:center; 
       align-content:center; 
       outline-style:solid; 
       outline-width:1px; 
       outline-color:black; 
      } 
      #rightside 
      { 
       text-align:center; 
       width:400px; 
       height:1000px; 
       padding: 30px; 
       line-height: 100px; 
       float:right; 
       outline-style:solid; 
       outline-width:1px; 
       outline-color:black; 
      } 

     </style> 
     <div id="rightside"> 
      <p>Select Layer</p> 
      <form> 
       <button class="button" onclick="skin()">Skin</button><br> 
       <button class="button" onclick="muscle()">Muscle</button><br> 
       <button class="button" onclick="organs()">Organs</button><br> 
       <button class="button" onclick="skeleton()">Skeleton</button><br> 
      </form> 
     </div> 
     <div> 
      <img id="image" src="humanoutline.jpg" alt="Body" style="width:464px;height:700px; "> 
     </div> 
    </body> 
</html>

虽然这在理论上应该工作，问题是，每当按下每个按钮时，页面仅部分加载新的图像，然后切换回默认的图像，这是humanoutline.jpg。

作为参考，这里是我目前使用的四个图像。

humanoutline.jpg：

humanoutline2.jpg：

humanoutline3.jpg：

humanoutline4.jpg：

来源

2016-03-08 user2309750

你只需要添加type="button"到<button>标签，像这样：

<form> 
    <button type="button" class="button" onclick="skin()">Skin</button><br> 
    <button type="button" class="button" onclick="muscle()">Muscle</button><br> 
    <button type="button" class="button" onclick="organs()">Organs</button><br> 
    <button type="button" class="button" onclick="skeleton()">Skeleton</button><br> 
</form>

这里是一个codepen与正在工作的变化（虽然图像的URL从上传的热链接是这样的问题，所以我不知道他们是否会继续工作）：http://codepen.io/anon/pen/GZZJVv

来源

2016-03-08 18:13:44 rubergly

的问题是，按钮是“提交”表单，这会导致页面重新加载。

简单的解决办法是修改你的功能如下：

function skin() { 
    document.getElementById("image").src="humanoutline.jpg"; 
    // the "return false" will cause the button to NOT submit the form 
    return false; 
}

然而书面到目前为止是会得到大快，难以维持，所以我想你的代码建议/提供一种替代方法来做到这一点。

您可以更改按钮以调用相同的功能，但传入相关的参数。此外，他们应该return，见下图：

 <form> 
      <button class="button" onclick="return changeImage('humanoutline.jpg')">Skin</button><br> 
      <button class="button" onclick="return changeImage('humanoutline2.jpg')">Muscle</button><br> 
      <button class="button" onclick="return changeImage('humanoutline3.jpg')">Organs</button><br> 
      <button class="button" onclick="return changeImage('humanoutline4.jpg')">Skeleton</button><br> 
     </form>

，改变你的脚本接受一个参数，并使用该图像中：

function changeImage(img) { 
    document.getElementById("image").src=img; 
    return false; 
}

来源

2016-03-08 17:02:18

我已经做了您的更改，图像仍按照按钮后重置为默认值。你确定“返回false”会阻止页面重新加载吗？ – user2309750

感谢您的评论。我编辑了代码 - 按钮需要有'onclick ='return changeImage（'...'）;“'为了正确地停止页面重新加载。我很抱歉！ –

用HTML中的JavaScript函数更改图像的源代码

回答

相关问题