JS Mouse over change background event

by vovkasolovev

HTML

<div id="amr-tablet" style="height:866px; background: url('http://podhod.ru/images/amr/amr-tablet.jpg') 50% 0 no-repeat; margin: 0 auto;">
<div id="amr-button" style="border:3px solid red; width: 800px;  height: 613px;  position: absolute;  left: 0;  right: 0;
  top: 80px;  margin: 0 auto;"></div>
<div style="bottom: 0;  position: absolute;">
<table class="image_comment"><tr><td></td><td><div>Главная страница сайта на планшете</div></td></tr></table>
</div>
</div>

JavaScript

var button = document.getElementById("amr-button");
var item = document.getElementById("amr-tablet");
if (button.addEventListener) { // all browsers except IE before version 9
    button.addEventListener("mouseover", function () {
        OnMouseOver(item)
    }, false);
    button.addEventListener("mouseout", function () {
        OnMouseOut(item)
    }, false);
} else {
    if (button.attachEvent) { // IE before version 9
        button.attachEvent("mouseover", function () {
            OnMouseOver(item)
        });
        button.attachEvent("mouseout", function () {
            OnMouseOut(item)
        });
    }
}

function OnMouseOver(item) {
    item.style.backgroundPosition = '50% -866px';
}

function OnMouseOut(item) {
    item.style.backgroundPosition = '50% 0';
}