Сдвиг background'a
Добрый день. Я новичок в 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; } заранее спасибо за помощь. |
Ну правильно, зачем его резать, это же спрайт. Для сдвига бэкраунда есть замечательное css свойство background-position. Вот его и изменяйте.
|
Часовой пояс GMT +3, время: 13:55. |