ホームページ内の画像を移動させ、色を変えるには？？

前提・実現したいこと

ホームページ内の画像を特定の場所(枠の中や画像の上など)に移動させると、画像の色が変わる処理をしたい。
画像を移動させることと、座標の取得方法は分かったが、この2つを合わせて、特定の場所に移動すると、色が変わる処理がわからないので、教えていただきたいです。

該当のソースコード

html
1<body>
2	<div id="moveposi">
3    x = <span id="x"></span>
4	<br>y = <span id="y"></span>
5	<br>px = <span id="px"></span>
6	<br>py = <span id="py"></span>
7    </div>
8        <div class="pic_frame"><img src="Material/pic/icon.png" cmanOMat="move" class="non"><p>　Yealicoのアイコン</p></div>	
9        <img src="Material/pic/sample.png" width='40%' height='40%'  class="non">
10<script>
11  var targetElement = document.getElementById("moveposi");
12
13  setInterval(function(){
14	var clientRect = targetElement.getBoundingClientRect();
15
16	// 画面内の位置
17	var x = clientRect.left;
18	var y = clientRect.top;
19
20	// ページ内の位置
21	var px = window.pageXOffset + clientRect.left;
22	var py = window.pageYOffset + clientRect.top;
23
24	// 表示
25	for(var a=[["x", x], ["y", y], ["px", px], ["py", py]],i=a.length; i--;){
26		document.getElementById(a[i][0]).textContent = a[i][1];
27	}
28}, 100);
29</script>
30</body>