在此扩展问题: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>
最佳答案
由于您现在正在做多项事情,因此最好将更改代码分解为自己的函数。但基本上你需要访问 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
值。
更新
如果您需要从其他地方获取该链接,这里有一种可能的替代方法来编写脚本。我为每个颜色项添加了另一个级别的属性:a 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
radio 上的事件,在选择和取消选择时都会触发。
因此,如果您想对单选和选择使用相同的函数,您可以将 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
当使用键盘更改值时很好。)
关于javascript - 根据下拉菜单和图像链接更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25291829/