window.onload = function() { var teamElemList = document.getElementsByClassName("team-member"); for(var i = 0;i < teamElemList.length;i ++) { teamElemList[i].addEventListener("mouseover", changeImageOver); teamElemList[i].addEventListener("mouseout", revertImageOut); teamElemList[i].addEventListener("mousedown", changeImageDown); teamElemList[i].addEventListener("mouseup", revertImageUp); teamElemList[i].style.backgroundColor = "#90551e"; } var group = document.querySelector(".group-list"); var groupList = group.children; for(var i =0;i < groupList.length;i ++) { groupList[i].addEventListener("click", displaySelectedGroup); } } function changeImageOver() { var teamElem = this; // teamElem.style.backgroundColor = "#90551e"; teamElem.style.cursor = "pointer"; var temp = teamElem.getElementsByClassName("member-img"); temp[0].style.zIndex = -1; temp[1].style.zIndex = 2; temp[1].style.opacity = 0.4; temp = teamElem.querySelector(".member-intro"); temp.style.display = "block"; temp.style.opacity = 1; temp.style.transition = "opacity 0.8s"; } function revertImageOut() { var teamElem = this; // teamElem.style.backgroundColor = "transparent"; teamElem.style.cursor = "auto"; var temp = teamElem.getElementsByClassName("member-img"); temp[0].style.zIndex = 0; temp[1].style.zIndex = -2; temp = teamElem.querySelector(".member-intro"); temp.style.display = "none"; // temp.style.opacity = 0; // temp.style.transition = "opacity 0s"; } function changeImageDown() { var teamElem = this; // teamElem.style.backgroundColor = "#90551e"; teamElem.style.cursor = "auto"; var temp = teamElem.getElementsByClassName("member-img"); temp[1].style.zIndex = -2; temp[2].style.zIndex = 3; temp = teamElem.querySelector(".member-name"); temp.style.display = "none"; temp = teamElem.querySelector(".member-intro"); temp.style.display = "none"; temp = teamElem.querySelector(".member-cute"); temp.style.display = "block"; } function revertImageUp() { var teamElem = this; // teamElem.style.backgroundColor = "transparent"; teamElem.style.cursor = "pointer"; var temp = teamElem.getElementsByClassName("member-img"); temp[1].style.zIndex = 2; temp[2].style.zIndex = -3; temp[1].style.opacity = 0.4; temp = teamElem.querySelector(".member-name"); temp.style.display = "block"; temp = teamElem.querySelector(".member-intro"); temp.style.display = "block"; temp = teamElem.querySelector(".member-cute"); temp.style.display = "none"; } function displaySelectedGroup() { var displayGroupName = this.getAttribute("data-group"); var team = document.querySelector(".team-row"); var teamList = team.children; if(displayGroupName == "all") { for(var i = 0;i < teamList.length;i ++) { teamList[i].style.display = "inline-block"; } } else { for(var i = 0;i < teamList.length;i ++) { teamList[i].style.display = "none"; } var displayGroups = team.getElementsByClassName(displayGroupName); for(var i = 0;i < displayGroups.length;i ++) { displayGroups[i].style.display = "inline-block"; } } }