$(window).load(function () {
document.getElementById('quasactiv').style.display = 'none';
document.getElementById('wexactiv').style.display = 'none';
document.getElementById('exortactiv').style.display = 'none';
document.onkeydown = function(invoke) {
if(82 === invoke.keyCode) {
//вот напишите так как вы говорите будет праильно
}
}
});
<!doctype html>
<html lang="ru">
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/cast.js"></script>
<script type="text/javascript" src="js/shporgalka.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>
<div class="platforma">
</div>
<div class="shpargalka">
</div>
<div class="cast">
<div id="quas" onclick="clickQuas()">
<input id="btn-quas" type="submit" value="Q">
</div>
<div id="wex" onclick="clickWex()">
<input id="btn-wex" type="submit" value="W">
</div>
<div id="exort" onclick="clickExort()">
<input id="btn-exort" type="submit" value="E">
</div>
<div id="invoke">
<input id="btn-invoke" type="submit" value="R">
</div>
</div>
<div class="platforma2">
</div>
</html>
* {
margin:0;
padding:0;
}
.invoker {
margin-top: 20px;
}
.qwe {
width: 280px;
position: relative;
text-align: center;
margin: 0 auto;
}
.qwe div {
display: inline-block;
margin: 20px 10px 0px 10px;
border-radius: 100%;
border: 5px solid #000;
}
.cast {
width: 100%;
position: relative;
text-align: center;
}
.cast div{
display: inline-block;
margin: 0 10px 0 10px;
}
.cast a {
text-decoration: none;
}
#quas {
border-radius:5px;
background-image: url(img/quas.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#wex {
border-radius:5px;
background-image: url(img/wex.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#exort{
border-radius:5px;
background-image: url(img/exort.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#invoke{
border-radius:5px;
background-image: url(img/invoke.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
.content {
border-radius:5px;
background: url(img/invoker.jpg) no-repeat 50% 95%;
height: 270px;
margin: 30px auto;
border: 5px solid #232523;
width: 230px;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#quas:active {
width: 125px;
height: 125px;
}
#wex:active {
width: 125px;
height: 125px;
}
#exort:active {
width: 125px;
height: 125px;
}
#invoke:active {
width: 125px;
height: 125px;
}
#wexactiv {
background:url(img/wexactiv.png)no-repeat;
height: 60px;
width:60px;
margin:0 auto;
border:2px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#quasactiv {
background: url(img/quasactiv.png)no-repeat;
height: 60px;
width:60px;
border:2px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#exortactiv {
background:url(img/exortactiv.png)no-repeat;
height: 60px;
width:60px;
border:2px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
.content p {
text-decoration: none;
color: #000;
transform: rotate(-45deg);
}
.content p:hover {
color:#fff;
}
.content a {
text-decoration: none;
color: #000;
}
.content a:hover {
color:#fff;
}
.shpargalka {
position: relative;
display: none;
background: url(img/shporgalka.png) no-repeat;
height: 660px;
width: 470px;
margin: 0px auto;
bottom: 20px;
}
a.shtorka{
position: absolute;
text-decoration: none;
color: #000;
display: block;
font-family: cursive;
left: -15px;
bottom: 0px;
top: -3px;
}
a.shtorka:hover{
position:absolute;
text-decoration: none;
color: #fff;
display: block;
font-family: cursive;
}
input[type="submit"] {
font-size: 30px;
color: #FFF;
background: #4F4F4F;
border: 2px solid #262726;
padding: 0 5px 0 5px;
float: left;
}
.platforma {
border-top: 10px solid #232523;
position: relative;
margin: 0 auto;
width: 1000px;
bottom: 35px;
border-radius:50px;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
.platforma2 {
border-top: 10px solid #232523;
position: relative;
margin: 0 auto;
width: 100%;
border-radius: 50px;
top: 20px;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}