<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/shporgalka.js"></script>
<script type="text/javascript" src="js/cast.js"></script>
<link href="cast.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="invoker">
</div>
<div class="qwe">
<div id="quasactiv">
<a href="#"></a>
</div>
<div id="wexactiv">
<a href="#"></a>
</div>
<div id="exortactiv">
<a href="#"></a>
</div>
</div>
<div class="content">
<p><a href="#" class="shtorka">подсказка</a></p>
<div id="leftcast">
</div>
<div id="rightcast">
</div>
</div>
<div class="platforma">
</div>
<div class="shpargalka">
</div>
<div class="cast">
<div class="leftokey">
</div>
<div id="leftcaststart">
</div>
<div class="qweactiv">
<div id="quas">
<input id="btn-quas" type="submit" value="Q">
</div>
<div id="wex">
<input id="btn-wex" type="submit" value="W">
</div>
<div id="exort">
<input id="btn-exort" type="submit" value="E">
</div>
<div id="invoke">
<input id="btn-invoke" type="submit" value="R">
</div>
</div>
<div id="rightcaststart">
</div>
<div class="rightokey">
</div>
</div>
<div class="platforma2">
</div>
<div id="newEl">Тут что то да появится, если кнопку нажать</div>
<input type="button" value="Нажми меня" onclick="newInf();">
</body>
</html>
window.onload=function(invoker){
document.onkeydown = function(qwerDown) {
if (81 === qwerDown.keyCode) {
document.getElementById('quas').style.width = '125px';
document.getElementById('quas').style.height = '125px';
document.getElementById('btn-quas').style.border = '2px solid #4067A6';
}
else if (87 === qwerDown.keyCode) {
document.getElementById('wex').style.width = '125px';
document.getElementById('wex').style.height = '125px';
document.getElementById('btn-wex').style.border = '2px solid #4067A6';
}
else if (69 === qwerDown.keyCode) {
document.getElementById('exort').style.width = '125px';
document.getElementById('exort').style.height = '125px';
document.getElementById('btn-exort').style.border = '2px solid #4067A6';
}
else if(82 === qwerDown.keyCode) {
document.getElementById('invoke').style.width = '125px';
document.getElementById('invoke').style.height = '125px';
document.getElementById('btn-invoke').style.border = '2px solid #4067A6';
}
else {
};
};
document.onkeyup = function(qwerUp) {
if (81 === qwerUp.keyCode) {
document.getElementById('quas').style.width = '128px';
document.getElementById('quas').style.height = '128px';
document.getElementById('btn-quas').style.border = '2px solid #262726';
}
else if (87 === qwerUp.keyCode) {
document.getElementById('wex').style.width = '128px';
document.getElementById('wex').style.height = '128px';
document.getElementById('btn-wex').style.border = '2px solid #262726';
}
else if (69 === qwerUp.keyCode) {
document.getElementById('exort').style.width = '128px';
document.getElementById('exort').style.height = '128px';
document.getElementById('btn-exort').style.border = '2px solid #262726';
}
else if(82 === qwerUp.keyCode) {
document.getElementById('invoke').style.width = '128px';
document.getElementById('invoke').style.height = '128px';
document.getElementById('btn-invoke').style.border = '2px solid #262726';
}
else {
};
};
};