Javascript OnClick ChangeImage和URL

我有一个主图像和一个缩放图标，在第一个图像旁边有一个图像。我想写一个JavaScript代码，当我点击第二个图像时，它会改变第一个图像

scr

和缩放图标的

href

链接，我找到了它的代码，但我无法让它工作。这是我目前掌握的代码：

函数更改（menuId、image、newImage、newUrl）
{
var img=document.getElementById（图像）；
img.src=newImage；
document.getElementById（'d3'）。href=newUrl；
} 

这应该可以做到：

函数changeImage（元素，newUrl）{
element.src=newUrl；
document.getElementById（'d3'）。href=newUrl；
}

---

首先，您需要确保js功能正常工作。 其次，

是不对的，它应该是对的

---

如果我的理解是正确的。

小说明是：您只需要将单击的图像指定给缩放图标，以使其具有切换效果。[我们通过

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>

函数changeImage（元素，newUrl）{
element.src=newUrl；
document.getElementById（“d3”）.href=newUrl；
}

嘿，罗伯特现在更新了

• 正如其他人已经说过的，

  change（）

  应该是

  changeImage（）

  ，反之亦然

• MenuId

  参数没有明显的目标，因此将其删除
• 创建

  zoomImage（）

  函数就是为了好玩
• 单击任何底部图像，顶部图像会发生更改，链接的

  href

  也会发生更改
• 缩放图标将在不离开页面的情况下将顶部图像放大50%
• 增加了2个以上的功能…不确定OP想要什么。

  • imageZoom（）

    将使用

    transform:scale（）

    缩放图像

  • resetImage（）

    将图像重置回128px

片段

img{
光标：指针；
}

函数changeImage（newImage，newUrl）{
var img=document.getElementById（'img'）；
img.src=newImage；
document.getElementById（'goto'）。href=newUrl；
返回false；
}
函数zoomImage（）{
var img=document.getElementById（'img'）；
如果（img.style.width==“192px”）{
img.style.width=“128px”
}否则{
img.style.width=“192px”；
}
返回false；
}
函数imageZoom（）{
var img=document.getElementById（'img'）；
如果（img.style.width==“512px”）{
img.style.transform=“比例（.25）”；
}否则{
img.style.transform=“比例（4）”；
}
返回错误；；
}
函数resetImage（）{
var img=document.getElementById（'img'）；
img.style.width=“0px”；
img.style.transform=“比例（1）”
img.style.width=“128px”；
返回false；
}
重置

Wehre你调用

change（）

方法

changeImage（）

做什么？当我点击img/barna.png来更改主图像“scr”和ico缩放的“href”时，它仍然不能与你的更正一起工作：（我不明白，我应该在你写“this”的地方做什么？你不必在“this”的位置写任何东西。“this”是一个关键字，用于引用当前元素，因此当你单击barna.png图像时，“this”将引用该图像元素好的，但这样，当我单击“barna.png”时，它会将图像更改为问号。并且不会更新ico zoom的href:（它对我仍然不起作用我在评论中发布了我的更新代码你能告诉我我做错了什么吗？你是否替换了我回答中提供的onclick参数值和changeImage函数？我测试了代码，图像的src将被函数调用中提供的url替换。是的，它更改了图像。这部分是working。但我想让它也更改ico缩放的“href”，不幸的是，这部分不起作用：（我在JS代码段中添加了一行新行。它将更改ico-zoom的href。现在，当我单击图像时，它会将主图像更改为问号（如未找到图像），并且ico-zoom的url不会更改。）（我在评论中发布了我新的完整html部分。我不明白我不能让ico zoom对图片进行缩放。我只使用html，没有将任何内容放入.js文件或任何内容。我不明白你在说什么……演示是否按照你希望的方式工作？你是否尝试将演示集成到你自己的pr中oject？增加了另一个缩放功能和重置功能。