кнопку Javascript нажмите + раскрыть

Question

У меня есть большая красная кнопка, и я пытаюсь использовать JavaScript, чтобы выполнить следующие действия: -

1. OnMouseDown изменить изображение таким образом, кнопка выглядит подавленным
2. OnMouseUp вернуться в исходное image И показать скрытый div

Я могу получить onMouse Вниз и onMouseUp изображение изменяет часть на работу.

Я могу также получить скрытые DIV выявить с помощью OnClick

Проблема в том, что я не могу получить все это работать вместе.

Как это сделать?

Кстати, я уверен, что его очевидное, но я довольно новыми для JavaScript, так что я ценю вашу помощь

Answer 1

Вы можете использовать точку с запятой для разделения нескольких операторов сценария в случае:

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

Кроме того, я считаю, что большинство браузеров поддерживают событие OnClick:

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

Так как вы сказали, что вы уже выяснили, каждая из трех частей отдельно, я просто написал вызовы функций, которые вы можете заменить своим собственным кодом для каждого шага.

Answer 2

Не видя код, это трудно сказать, но я подозреваю, что недостающий «возвращает истину; ' в конце обработчиков событий onclick или onmouseup.

Answer 3

Не рекомендуется прикреплять события к элементам с использованием атрибутной нотации непосредственно к тегу элемента html.

Это гораздо лучше практика, чтобы отделить вид (будучи тонированное HTML) от контроллера (действия происходит)

Лучший способ прикрепить событие, как, например:

<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>