更改图像基于下拉菜单和图像链接

Change Image based on dropdown and image link

本文关键字：图像 链接 下拉菜单      更新时间：2023-09-26

扩展这里的问题:如何使用javascript来交换图像与选项更改?

根据问题中基于选择选项更改图像的方法，我如何更改图像周围的<a></a>链接以镜像显示图像?

<script>
var colorUrlMap = {
  "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
  //Add more here
  "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
  <option value="Black/White">Black/White</option>
  <!-- Add more here -->
  <option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">

的例子:

<a href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

既然您现在正在做多个事情，那么最好将更改代码分解为自己的函数。但是基本上，您需要访问a标签的href属性，就像您访问img标签上的src一样。

<script>
    var colorUrlMap = {
        "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
        //Add more here
        "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
    };
    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value];
        document.getElementById('link_id').href = colorUrlMap[el.value];
    }
</script>
<select name="Color:" onchange="changeSelect(this)">
    <option value="Black/White">Black/White</option>
    <!-- Add more here -->
    <option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage"> 
example:
<a id="link_id" href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

你可能注意到我也给了a一个id的值。

如果你需要从其他地方获得链接，这里有一个可能的替代方法来编写你的脚本。我为每个颜色项目添加了另一个级别的属性:src和href，以匹配您在a和img标签上更新的属性名称。

<script>
    var colorUrlMap = {
        "Black/White" : {
            "src" : "images/taylormade_purelite_standbag_bk.jpg",
            "href" : "your link here"
        },
        //Add more here
        "White/Red/Black" : {
            "src" : "images/taylormade_purelite_standbag_wrb.jpg",
            "href" : "your other link here"
        }
    };
    function changeSelect(el) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
</script>

更新2

回答评论中关于单选按钮的问题，是的。从您的代码示例中，目前您有一个关于无线电的onclick事件的表单提交。你需要改变这一点。然而，radio按钮的技巧是，您只想使用所选单选的值。如果您在无线电上使用onchange事件，它将在选择和取消选择时触发。

因此，如果您希望对无线电和选择使用相同的函数，可以将setter行包装在if语句中:

function changeColor(el) {
    if (el.nodeName != "INPUT" || el.checked) {
        document.getElementById('myimage').src = colorUrlMap[el.value].src;
        document.getElementById('link_id').href = colorUrlMap[el.value].href;
    }
}

这应该适用于select, input[type=radio]和input[type=checkbox]。您可以将其放在onclick、onchange或onkeyup处理程序中。(当使用键盘更改值时，onkeyup是好的)

相关文章：