Добрый день. Я новичок в javascript, только учусь.
Подскажите пожалуйста как можно сделать так что бы при выборе в пункте меню у меня бэкграунд съезжал на нужную карту. cards.png разрезать нельзя!
вот пример сайта
http://lisyak.pp.ua/
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" /><body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function XY()
{
var element = document.getElementById('Kard');
var properties = {top: 1, left: 1};
for (var property in properties)
{
var input = document.getElementById(property + '-input');
element.style[property] = input.value + 'px';
}
}
function zalez()
{
document.getElementById('rectangle').style.backgroundColor='#ff0000';
}
function vilez()
{
document.getElementById('rectangle').style.backgroundColor='#9aefda';
}
</script>
</head>
<body>
<div id='ChangePosition'>
<input id="top-input" placeholder="значение Y(от 1 до 600)" /><br>
<input id="left-input" placeholder="значение X(от 1 до 1000)" /><br>
<input type="button" value="Сдвинуть!" onClick="XY()"/><br>
</div>
<div id="choise1">
<select id="mast" onClick="XY()">
<option value="0">Трефа</option>
<option value="1">Бубна</option>
<option value="2">Чирва</option>
<option value="3">Пика</option>
</select>
</div>
<div id="choise2">
<select id="card">
<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>
</div>
<div id="rectangle">
</div>
<div class="A" id="Kard" onmouseover="zalez()" onmouseout="vilez()" >
</div>
</body>
style.css
body
{
background-color: green;
}
.A
{
position: absolute;
background: url("cards.png");
background-position:-197px -572px ;
top: 300px;
left: 750px;
width:98px ;
height: 143px;
}
#ChangePosition{
color: white;
position: absolute;
top: 30px;
left: 30px;
}
#rectangle {
position: absolute;
top: 30px;
right: 30px;
width: 60px;
height: 100px;
background-color: #ffff00;
}
#choise1{
color: white;
position: absolute;
top: 120px;
left: 30px;
}
#choise2{
color: white;
position: absolute;
top: 120px;
left: 120px;
}
заранее спасибо за помощь.
