<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="css/master.css" />
<style type="text/css">
#cards {
width: 1300px;
min-height: 150px;
float: left;
}
#cards > div{
display: none;
background: url('cards.png');
background-repeat: no-repeat;
float: center;
height: 143px;
width: 100px;
}
#form {
width: 100%;
float:left;
margin-top: 50px;
}
#form > div {
float: left;
display: block;
width: 100%;
}
#rectangle {
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<center><div id="cards"></div></center>
<div id="rectangle"></div>
<div>
<form id="form">
<div>
<p>Введите координаты</p>
Высота <input type="number" name="top">  Ширина <input type="number" name="left">
</div>
<br>
<br>
<p>Введите масть и значение</p>
<label>Масть</label>
<select name="type">
<option value="0"> Хреста </option>
<option value="1"> Бубна </option>
<option value="2"> Чирва </option>
<option value="3"> Пика </option>
</select>
 
<label>Значение</label>
<select name="value">
<option value="0"> Туз </option>
<option value="1"> 2 </option>
<option value="2"> 3 </option>
<option value="3"> 4 </option>
<option value="4"> 5 </option>
<option value="5"> 6 </option>
<option value="6"> 7 </option>
<option value="7"> 8 </option>
<option value="8"> 9</option>
<option value="9"> 10 </option>
<option value="10"> Валет </option>
<option value="11"> Дама </option>
<option value="12"> Король </option>
</select>
<input type="submit" value="Показать">
</form>
</div>
<script>
var cardsQTY = 55,
field = document.getElementById('cards'),
cards = '',
counterRow = 0,
counterCol = 0;
for (var i=0; i < cardsQTY; i++) {
cards += '<div data-number="'+i+'" data-col="'+ counterCol +'" data-row ="'+ counterRow +'" style="background-position-x: -' + counterRow * 98.2 + 'px;background-position-y: -' + counterCol * 143 + 'px"></div>';
counterRow ++;
if (counterRow === 13) {
counterRow = 0;
counterCol++;
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
field.innerHTML = cards;
document.querySelectorAll("[data-number='" + getRandomInt(0,cardsQTY) +"']")[0].style.display = 'block';
var form = document.getElementById("form"),
nodes = document.getElementById('cards').childNodes,
rectangle = document.getElementById('rectangle');
form.addEventListener("submit", function(e){
e.preventDefault();
var topCoords = form.elements['top'].value,
leftCoords = form.elements['left'].value,
type = form.elements['type'].value,
value = form.elements['value'].value,
el = document.querySelectorAll("[data-col='"+ type +"'][data-row='"+value+"']")[0];
for(var i=0; i<nodes.length; i++) {
if (nodes[i].nodeName.toLowerCase() == 'div') {
nodes[i].style.display = 'none';
}
}
css = {
display: 'block',
position: 'absolute',
top: topCoords + 'px',
left: leftCoords + 'px'
};
for(i in css){
el.style[i] = css[i];
}
});
for(var i=0; i<nodes.length; i++) {
nodes[i].onmouseover = function (argument) {
rectangle.style.background = 'red';
};
nodes[i].onmouseout = function (argument) {
rectangle.style.background = 'lightgreen';
};
}
</script>
</body>
</html>
