如何使圖像按鈕在點擊後保持點擊狀態

我基本上想在點擊後禁用Rollout和rollover功能。我嘗試了一個if參數，但是我無法讓它工作。對不起，我是一個真正的初學者。如何使圖像按鈕在點擊後保持點擊狀態

我已經實現在母體div中單擊鼠標來改變文本，但仍然無法禁用其他功能。

<!DOCTYPE html> 
<html> 
<head> 
    <link href="styles/main.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="script.js"></script> 

</head> 
<script> 

var Enabled = true;  
function down() 
{ 
document.getElementById("button").src = "images/click.png"; } 


var Enabled = true; 
function rollover() 
{ 
if(Enabled == true) 
{ 
document.getElementById("button").src = "images/on.png"; 
}else 
{ 
document.getElementById("button").src = "images/click.png"; 
} 
} 

var Enabled = true; 
function rollout() 
{ 
if(Enabled == true) 
{ 
document.getElementById("button").src = "images/off.png"; 
}else 
{ 
document.getElementById("button").src = "images/click.png"; 
} 
} 


function myFunction() { 
document.getElementById("demo").innerHTML = "Paragraph changed."; 
} 

<script/> 

<body> 


<h1>My Web Page</h1> 


<div class="test1"> 
<button type="button" onclick="myFunction()">Try it</button> 
</div> 


<div class="row"> 
    <div class="col"><p id="demo">A Paragraph</p></div> 
    <div class="col"><img src="images/off.png" id="button" 
onMouseOver="rollover()" onMouseOut="rollout()" 
onMouseDown="down()" 
onClick="myFunction()" 
onClick="this.innerHTML=down() 
onMouseUp="rollover()";/></div> 

<div class="col">col3</div> 
    </div> 


</body> 
</html>

來源

2015-11-09 Philipp Boettcher

統計通過修復您的內聯處理程序 - 你甚至可以看到他們在顏色編碼上失敗的地方。你不能有兩個onclicks。添加一個分號來堆疊它們：'onClick =「myFunction（）; this.innerHTML = down（）」'並記住你的引號。此外mouseDown觸發onClick – mplungjan

想法是在click或mousedown上添加一個類，然後在觸發這些（onMouseOver =「rollover（）」onMouseOut =「rollout（）」）觸發時檢查元素是否具有該類，如果有該類 – joyBlanks

檢查了這一點solution，當點擊它調用down（）函數，當您滾轉和部署它檢查是否啓用設置Enabledto虛假和chages形象，現在是真的，如果不是它不會改變圖片。

function down(ele) 
{ 
    ele.src = "//placekitten.com/50/30"; //Clicked 
    Enabled = false; }

來源

2015-11-09 13:03:28

親愛的安德烈亞斯，我想到了這個想法，但不知道如何調用HTML中的函數。我也很困惑這些啓用了錯誤的論點，因爲我不能讓他們中的任何一個到目前爲止工作:)感謝您的幫助無論如何:) –

什麼功能，你有麻煩打電話？ –

好吧，我玩弄的想法是通過點擊事件來設置啓用或禁用功能。但我無法讓它工作。 –

我發現hoooooly大盤:)

它有點棘手，解決方案，但工程:)

我改變DIV而不是禁用按鈕狀態的功能。

所以在這裏，它是：

function showDiv() { 
document.getElementById('button2').style.display = "block"; 
document.getElementById("button").style.display = "none"; 
}

Button2的是現在點擊按鈕狀態，按鈕是在所有其他國家都在div這樣，它停留在點擊狀態下的點擊後，我擺脫。點擊後的其他按鈕狀態:)

來源

2015-11-11 15:48:26

如何使圖像按鈕在點擊後保持點擊狀態

回答

相關問題