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

Я получаю элементы по имени класса, а не по идентификатору. Приведенный ниже код работает, если его заменить на id, однако мне нужно, чтобы он применялся к нескольким элементам.

HTML

<img class="navButton" id="topArrow" src="images/arrows/top.png" />
<img class="navButton" id="rightArrow" src="images/arrows/right.png" />

JS

var button = document.getElementsByClassName("navButton");

button.onmouseover = function() {
    button.setAttribute("class", "active");
    button.setAttribute("src", "images/arrows/top_o.png");
}

Нет ответов, содержащих JQuery, пожалуйста.