Question

我有主图像和缩放图标，我在第一张图像旁边有一张图像。我想编写一个JavaScript代码，当我点击第二个图像时，它会更改第一个图像scr和缩放图标的href链接，我找到了它的代码，但我无法使其工作。这是我到目前为止的代码：

<script type="text/javascript">
    function change(menuId, image, newImage, newUrl)
{
    var img = document.getElementById(image);
    img.src = newImage;
    document.getElementById('d3').href = newUrl;
} 
</script>

我尝试让它像那样工作

<script type="text/javascript">
    function change(menuId, image, newImage, newUrl)
{
    var img = document.getElementById(image);
    img.src = newImage;
    document.getElementById('d3').href = newUrl;
} 
</script>
        <div class="thumbnail">
            <div id="main_img">
             <img id="img" src="assets/example/latest/S8621A.png" alt=""/>
            <div class="caption">
                <span class="ico-block">
                    <a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span></a>
                </span>
            </div>
        </div>
            </div>
        <div style="text-align:center">
<div id="thumb_img">
    <img src='assets/img/fekete.png' onclick='changeImage("assets/example/latest/S8621A.png")' >
    <img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById'("d3").href = '(assets/example/latest/S8621B.png)'>
</div></div>

我只是不知道它应该如何运作。我真的不明白整个JavaScript。有人可以帮助我或告诉我它将如何运作？ THX的帮助。

Answer 1

首先，您需要确保js功能正常工作。其次，<img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById'("d3").href = '(assets/example/latest/S8621B.png)'>不对，它应该是 <img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById("d3").href = "assets/example/latest/S8621B.png"'>如果我的理解是对的。

Answer 2

小描述将是：您只需要将点击的图像指定为缩放图标以使其切换效果。[我们通过getElementById("d3")部分进行

    <script type="text/javascript">

function changeImage(element,newUrl) {
      element.src = newUrl;
      document.getElementById("d3").href= newUrl;
    }
    </script>
            <div class="thumbnail">
                <div id="main_img">
                 <img id="img" src="assets/example/latest/S8621A.png" alt=""/>
                <div class="caption">
                    <span class="ico-block">
                        <a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span></a>
                    </span>
                </div>
            </div>
                </div>
            <div style="text-align:center">
    <div id="thumb_img">
        <img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
    <img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")'>
  </div>
    </div></div>

Answer 3

嘿Robert现在更新

<!-- start: Portfolio -->
<section id="portfolio-grid" class="portfolio">

    <article class="javascript html">
<script type="text/javascript">
      function changeImage(element,newUrl) {
      element.src = newUrl;
      document.getElementById('d3').href = newUrl;
    }
        </script>
<div class="thumbnail">
  <div id="main_img">
    <img id="img" src="assets/example/latest/S8621A.png" alt="" />
    <div class="caption">
      <span class="ico-block">
                    <a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span>
      </a>
      </span>
    </div>
  </div>
</div>
<div style="text-align:center">
  <div id="thumb_img">
    <img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
    <img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")'>
  </div>
</div>

Answer 4

正如其他人已经说过的那样，change()应该是changeImage()，反之亦然。
MenuId参数没有明显的目标，因此已删除。
制作zoomImage()函数只是为了它的地狱。
点击任意底部图片，顶部图片也会发生变化，GO链接href也会发生变化。
缩放图标会将顶部图像放大50％，而不会离开页面。
增加了2个功能......不确定OP想要什么。
- imageZoom()将使用transform: scale()缩放图片。
- resetImage()会将图像重置为128px

<强>段

＆＃13;

img {
  cursor: pointer;
}

＆＃13;

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<script type="text/javascript">
  function changeImage(newImage, newUrl) {
    var img = document.getElementById('img');
    img.src = newImage;
    document.getElementById('goto').href = newUrl;
    return false;
  }

  function zoomImage() {
    var img = document.getElementById('img');
    if (img.style.width == "192px") {
      img.style.width = "128px"
    } else {
      img.style.width = "192px";
    }
    return false;
  }

  function imageZoom() {
    var img = document.getElementById('img');
    if (img.style.width == "512px") {
      img.style.transform = "scale(.25)";
    } else {
      img.style.transform = "scale(4)";
    }
    return false;;
  }

  function resetImage() {
    var img = document.getElementById('img');
      img.style.width = "0px";
      img.style.transform = "scale(1)"
      img.style.width = "128px";
      return false;
    }

</script>
<div class="thumbnail">

  <div id="main_img">
    <img id="img" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="" width="128" />
    <div class="caption">

      <div class="ico-block">
        <a id="goto" href="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">GO</a>
        <a class="ico-big" href="#" id="d3" width="32" onclick="zoomImage();">
          <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/32/Zoom-In-icon.png" />
        </a>
        <a class="ico-zoom" href="#" id="3d" width="32" onclick="imageZoom();">
          <img src="https://image.freepik.com/free-icon/zoom-in-pc_318-11477.jpg" width="32" />
        </a>
      </div>
    </div>
  </div>
</div>
<div style="text-align:center">
  <div id="thumb_img">
    <img src='http://i44.tinypic.com/2uxz43b.jpg' onclick='changeImage("http://cnx.org/resources/b785d2ec9b6302264f1ed942f4ec1b822d6f7b4c/lena.jpg", "http://cnx.org/resources/b785d2ec9b6302264f1ed942f4ec1b822d6f7b4c/lena.jpg")' width="128">
    <img src='http://www.log85.com/tmp/doc/img/perfectas/lenna/lenna1.jpg' onclick='changeImage("http://lh3.ggpht.com/_ERXQs5oLNgE/S01Ee_26lsI/AAAAAAAAAlY/1T0Dl4QJiYk/s800/lenaV.jpg", "http://lh3.ggpht.com/_ERXQs5oLNgE/S01Ee_26lsI/AAAAAAAAAlY/1T0Dl4QJiYk/s800/lenaV.jpg")'
    width="128">
    <button onclick="resetImage();">RESET</button>
  </div>
</div>

＆＃13;

OnClick ChangeImage和URL

4 个答案: