panController

by Ben Clayton

HTML

<div class="node">
	
	<div class="arrows">
		<div class="arrow top"></div>
		<div class="arrow right"></div>
		<div class="arrow bottom"></div>
		<div class="arrow left"></div>
	</div>
	<div class="pan"></div>
</div>
<br/>
<br/>
<br/>
<br/>
<button id="but">Pretend mouse</button>

CSS

.node {
	position:relative;
  width: 500px;
  height: 500px;
  border: 1px solid red;
}


.pan {
  width: 98%;
  height: 98%;
  background-color: #E0FFFF;
	margin:1%;
}

.arrows {
	position:absolute;
  width: 100%;
  height: 100%;
}

.arrow.left,
.arrow.right {
	position:absolute;
  width: 10%;
	top:4%;
	height: 89%;
  border: 3px solid gray;
	margin:1%;
}

.arrow.left {
	left: -2%;
	transform:  perspective(200px) rotate3d(0, 1, 0, 45deg);
	
}

.arrow.right {
	right: -2%;
	transform:  perspective(200px) rotate3d(0, 1, 0, -45deg);
}

.arrow.top,
.arrow.bottom {
	position:absolute;
  height: 10%;
	left:4%;
	width: 89%;
  border: 3px solid gray;
	margin:1%;
}

.arrow.top {
	top: -2%;
	transform:  perspective(200px) rotate3d(1, 0, 0, -45deg);
	
}

.arrow.bottom {
	bottom: -2%;
	transform:  perspective(200px) rotate3d(1, 0, 0, 45deg);
}

JavaScript

$("#fred").on("mouseover", function() {
  alert("mouseover");
});


$("#but").click(function() {

  $("#fred").trigger("mouseover");
});