<style>
.dvd {
-webkit-filter: invert(1);
filter: invert(1);
}
</style>
<script type="text/javascript">
function invert(){
document.getElementById("dvd").style.filter="invert(100%)";
}
doFunction = function(){
var topPosition = 200;
var leftPosition = 20;
var up=-1;
var right=1;
var intervalId = setInterval(function() {
var dvd = document.getElementById("dvd");
var bottom = window.scrollY + window.innerHeight;
var width = window.innerWidth;
var img = document.getElementById('dvd');
var img_width = img.clientWidth;
var img_height = img.clientHeight;
dvd.style.left = leftPosition + "px";
dvd.style.top = topPosition + "px";
dvd.style.visibility = "visible";
if (topPosition >= 75 && topPosition < bottom-img_height*1.15) {
topPosition += 5*up;
}
else {
up *= -1;
topPosition += 5*up;
}
if (leftPosition >= 0 && leftPosition < width-img_width*1.15) {
leftPosition += 10*right;
}
else {
right *= -1;
leftPosition += 10*right;
}
}, 25);
}
</script>
<img id="dvd" class="dvd" src="/img/dvd.png" style="position:
absolute; visibility:hidden; height:10%; width:10%" alt="dvd video"></img>
<p align="center">
<input id="clickMe" type="button" value="Start DVD" onclick="doFunction();" />
<button onClick="window.location.href=window.location.href">Refresh Page</button>
</p>