Question

在此处扩展问题：How to use javascript to swap images with option change?

根据基于选择选项更改图像的问题中的方法，我如何更改图像周围的<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>

Answer 1

由于您现在正在做多件事，最好将该更改代码分解为自己的函数。但基本上您需要访问href代码的a属性，方法与访问src代码上的img的方式相同。

<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在使用键盘更改值时效果很好。）

根据下拉列表和图像链接更改图像

1 个答案: