JSFiddle - React, Tailwind, and code Playground

by vincentieo

HTML

<body>
		<div id="nav">
			<a href="#top"><img class="navButton" id="topArrow" src="http://madmantis.co.uk/test/navigation1.1/images/arrows/top.png" /></a>
			<a href="#right"><img class="navButton" id="rightArrow" src="http://madmantis.co.uk/test/navigation1.1/images/arrows/right.png" /></a>
			<a href="#bottom"><img class="navButton" id="bottomArrow" src="http://madmantis.co.uk/test/navigation1.1/images/arrows/bottom.png" /></a>
			<a href="#left"><img class="navButton" id="leftArrow" src="http://madmantis.co.uk/test/navigation1.1/images/arrows/left.png" /></a>
			<img id="menuText" src="http://madmantis.co.uk/test/navigation1.1/images/text/worldatyourfeet.png"/>
		</div>

CSS

#nav {
	width: 225px;
	height: 225px;
	position: absolute;
    z-index: 100;
}

#menuText {
	position: absolute;
	width: 225px;
	height: 225px;
	left: 0px;
	top: 0px;
	z-index: -10;
}

#topArrow {
	position: absolute;
	left: 76px;
	width: 72px;
	height: 36px;
}

#rightArrow {
	position: absolute;
	left: 188px;
	top: 80px;
	width: 36px;
	height: 72px;
}

#bottomArrow {
	position: absolute;
	left: 76px;
	top: 188px;
}

#leftArrow {
	position: absolute;
	left: 0px;
	top: 80px;
}

.active {
	/* Class to select for background change in js */
}

body {
	background-color: #006ebc;
	background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMDdjY2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(30,87,153,1) 0%, rgba(41,137,216,1) 31%, rgba(32,124,202,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(31%,rgba(41,137,216,1)), color-stop(100%,rgba(32,124,202,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 31%,rgba(32,124,202,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(41,137,216,1)...

JavaScript

//assign navButtons to var buttons (creates array)
var buttons = document.getElementsByClassName("navButton");

//set buttonHover function
function buttonOn(){
	if ( arrow == topArrow.mouseout ) {
		newArrow = document.getElementById("topArrow");
		newArrow.setAttribute("src", topArrow.mouseover);
		menuText.setAttribute("src", topArrow.text);
	}
	if ( arrow == rightArrow.mouseout ) {
		newArrow = document.getElementById("rightArrow");
		newArrow.setAttribute("src", rightArrow.mouseover);
		menuText.setAttribute("src", rightArrow.text);
	}
	if ( arrow == bottomArrow.mouseout ) {
		newArrow = document.getElementById("bottomArrow");
		newArrow.setAttribute("src", bottomArrow.mouseover);
		menuText.setAttribute("src", bottomArrow.text);
	}
	if ( arrow == leftArrow.mouseout ) {
		newArrow = document.getElementById("leftArrow");
		newArrow.setAttribute("src", leftArrow.mouseover);
		menuText.setAttribute("src", leftArrow.text);
	} 
}

//set buttonHover function
function buttonOff(){
	if ( arrow != topArrow.mouseout ) {
		resetArrow = document.getElementById("topArrow");
		resetArrow.setAttribute("src", topArrow.mouseout);
		menuText.setAttribute("src", start.text);
	}
	if ( arrow != rightArrow.mouseout ) {
		resetArrow = document.getElementById("rightArrow");
		resetArrow.setAttribute("src", rightArrow.mouseout);
		menuText.setAttribute("src", start.text);
	}
	if ( arrow != bottomArrow.mouseout ) {
		resetArrow = document.getElementById("bottomArrow");
		resetArrow.setAttribute("src", bottomArrow.mouseout);
		menuText.setAttribute("src", start.text);
	}
	if ( arrow != leftArrow.mouseout ) {
		resetArrow = document.getElementById("leftArrow");
		resetArrow.setAttribute("src", leftArrow.mouseout);
		menuText.setAttribute("src", start.text);
	}
}

//for each instance of buttons, assign class "active" onmouseover
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseover = function() {
        this.className = "active";
        arrow =...