如何创建 Javascript 更改图像的按钮 & 每个图像链接到 url & 活动按钮具有高亮颜色

Question

使用显示的示例 here 或下面的代码显示如何使用 javascript 按钮在图像之间切换（打开按钮显示明亮的灯泡图像，关闭按钮显示黑暗的灯泡图像）。

But, I also need each image to link to a different url webpage when image (not button) is selected.

该按钮将控制图像的变化，单击时每个图像将 link 变为不同的 url。

是否还有一种方法可以为活动按钮创建色调。

我想对同一页面上的几组按钮和图像重复使用此脚本。我也愿意接受任何其他脚本创意。

下面的示例脚本 javascript 放置在 html 页面的正文中：

<button onclick="document.getElementById('myImage').src='http://www.w3schools.com/js/pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="http://www.w3schools.com/js/pic_bulbon.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='http://www.w3schools.com/js/pic_bulboff.gif'">Turn off the light</button>

Answer 1

您可以将图像包裹在锚标记中，然后像更新 img 元素上的 src 属性一样更新 href 属性。

<button onclick="document.getElementById('myImage').src='http://www.w3schools.com/js/pic_bulboff.gif';document.getElementById('myLink').href='http://www.google.com'">Turn on the light</button>

<a id="myLink" href="http://www.google.com">
<img id="myImage" src="http://www.w3schools.com/js/pic_bulboff.gif" style="width:100px">
</a>
<button onclick="document.getElementById('myImage').src='http://www.w3schools.com/js/pic_bulbon.gif';document.getElementById('myLink').href='http://www.yahoo.com'">Turn off the light</button>

如何创建 Javascript 更改图像的按钮 & 每个图像链接到 url & 活动按钮具有高亮颜色

How to create Javascript buttons that change image & each image links to url & active button has highight color

javascript

image

toggle