Javascript pulsante di scatto + rivelare

Question

Ho un grosso pulsante rosso e sto cercando di utilizzare javascript per eseguire le seguenti operazioni: -

1. onMouseDown cambiare l'immagine in modo che il tasto appare depresso
2. onMouseUp tornare all'immagine iniziale e rivelare un div nascosti

posso ottenere l'Onmouse Down e immagine onMouseUp cambia parte al lavoro.

Posso anche ottenere il div nascosti per rivelare utilizzando Su clic

Il problema è che non posso ottenere tutto di lavorare insieme.

Come posso fare questo?

A proposito, io sono sicuro che il suo ovvio, ma io sono abbastanza nuovo per javascript, quindi apprezzo il vostro aiuto

Answer 1

È possibile utilizzare il punto e virgola per separare più istruzioni dello script in un evento:

<img src="..." alt="..."
  onmousedown="depressed();"
  onmouseup="undepressed(); revealDiv();" />

Inoltre, credo che la maggior parte dei browser supportano l'evento onclick:

<img src="..." alt="..."
  onmousedown="depressed();"
  onmouseup="undepressed();"
  onclick="revealDiv();" />

Dal momento che hai detto che avevi già capito ciascuna delle 3 parti separatamente, ho appena scritto chiamate di funzione che è possibile sostituire con il proprio codice per ogni passo.

Answer 2

Senza vedere il codice, è difficile da dire, ma ho il sospetto che la mancanza di un 'return true;' dichiarazione alla fine sia del onclick o gestori di eventi onMouseUp.

Answer 3

Non è mai consigliabile collegare gli eventi di elementi utilizzando la notazione attributo direttamente al tag di un elemento HTML.

Si tratta di un molto meglio la pratica di separare la vista (essendo il rendering HTML) dal controller (le azioni accadendo)

Il modo migliore per collegare un evento è come tale:

<img id="abut" />

<script>
var thebutton = document.getElementById('abut'); //Retrieve the button from the page 
thebutton.onmousedown = depressed; //depressed is a function that you declare earlier on...here, you are just passing a reference to it
thebutton.onmouseup = function () {
    undepressed();
    revealDiv(); //Invoke the two functions when the 'onmouseup' is triggered'
};
</script>