Javascript + Imagemap: The Glitch of the Cybernaut
<meta charset="utf-8">
<html>
<head>
<style>
area { cursor: pointer; }
</style>
<script src="jquery-1.11.1.min.js">
Reload the page to get source for: http://pzwart3.wdka.hro.nl/prototyping/handsimon2014/jquery-1.10.2.min.js
</script>
</head>
<body>
![]()
<map name="map" id="map">
<area id="c1" alt="" title="" href="c1.bmp" shape="rect" coords="0,0,247,187" style="outline:none;" target="_self" />
<area id="c2" alt="" title="" href="c2.bmp" shape="rect" coords="246,0,350,187" style="outline:none;" target="_self" />
<area id="c3" alt="" title="" href="c3.bmp" shape="rect" coords="349,0,660,187" style="outline:none;" target="_self" />
<area id="c4" alt="" title="" href="c4.bmp" shape="rect" coords="0,186,247,452" style="outline:none;" target="_self" />
<area id="c5" alt="" title="" href="c5.bmp" shape="rect" coords="246,186,350,452" style="outline:none;" target="_self" />
<area id="c6" alt="" title="" href="c6.bmp" shape="rect" coords="349,186,660,452" style="outline:none;" target="_self" />
<area shape="rect" coords="658,450,660,452" alt="Image Map" style="outline:none;" title="Image Map" />
</map>
<script>
var count=0;
var x= document.getElementsByTagName ("img");
$("area").mouseenter(function () {
console.log("touch", this);
x[0].src = this.href
})
$("img").mousemove(function (e) {
var i = Math.round((e.clientX / 301) * 6) + 1;
console.log("move", e.clientX, e.clientY, i);
x[0].src = "c"+i+".bmp";
})
function change (glitch) {
//count=count+1;
//if (count==6) {
// count=0;
//}
//alert(count);
x[0].src = glitch+".bmp";
setTimeout(reset,1000);
}
function reset(){
x[0].src = "0.bmp";
}
// var items = ["c1","c2","c3","c4","c5", "c6"] var objResults = {} for(var i = 0; i < 1000000; i++){ var randomElement = items[Math.floor(Math.random()*items.length)] if (objResults[randomElement]){ objResults[randomElement]++ }else{ objResults[randomElement] = 1 } } console.log(objResults)
</script>
</body>
</html>