它有效,但有一个讨厌的错误我无法理解如何修复(我是初学者)。 会发生什么是有3个图像按钮(这里只显示1的代码),当我将鼠标悬停在它们上面时,它们会改变图像,并在我关闭鼠标时恢复。这是html。 当我单击3个图像按钮(javascript)中的任何一个时,它会更改自己的图像,并将其他2个图像按钮设置为正常图像。 在此之后(单击图像),悬停的html代码不再起作用。
function changeImage3() {
document.getElementById('MageBTN').src = 'images/Character/NotSelected_Mage.png';
document.getElementById('WarriorBTN').src = 'images/Character/NotSelected_Warrior.png';
}
<a href="#" onclick="changeImage3()"><img id="RogueBTN" src="images/Character/NotSelected_Rogue.png" alt="image"
onclick="this.src='images/Character/Selected_Rogue.png';
this.onmouseover = false; this.onmouseout = false;"
onmouseover="this.src='images/Character/Selected_Rogue.png';"
onmouseout="this.src='images/Character/NotSelected_Rogue.png';">
</a>
答案 0 :(得分:0)
刚建议..使用简单的css属性..
#yourID a:hover{
//your image which want to show on hover
}
答案 1 :(得分:0)
如果我已正确理解您想要在单击时锁定按钮的选定状态,并在单击另一个按钮时解锁/重置为未选中状态。因此,您必须存储按钮的状态,因此我建议将所有功能移至脚本。由于您已准备好所有图像,因此足以在网址中更改Sel / NotSel。
window.onload = function() { // ensures that all elements are there
var buttons = {
RougeBTN: document.getElementById("RougeBTN"),
VertBTN: document.getElementById("VertBTN"),
BleuBTN: document.getElementById("BleuBTN")
},
locked;
function clicked() {
for (var btn in buttons) { // iterate over the buttons
var b = buttons[btn];
// if this button was clicked save the state
if (btn == b.id) locked = btn;
else {
b.src = b.src.replace('/Sel', '/NotSel');
}
}
}
function mover() { // works only when button is not locked
if (locked != this.id) this.src = this.src.replace('/NotSel', '/Sel');
}
function mout() { // works only when button is not locked
if (locked != this.id) this.src = this.src.replace('/Sel', '/NotSel');
}
for (var btn in buttons) { // now set the functions to all buttons
var b = buttons[btn];
b.onclick = clicked; b.onmouseover = mover; b.onmouseout = mout;
}
}
在html中,所有按钮都如下所示:
<img id="RougeBTN" src="images/Character/NotSelected_Rouge.png" alt="image">