Javascript + Imagemap: The Glitch of the Cybernaut
The Glitch of the Cybernaut is an attempt at making a full visualization of our digital culture today. I've had many problems trying to visualize it though and only came as far as creating the cybernaut. The cybernaut's body represents the rigidity and fluidity of the cyberspace we live in. Our human bodies are no longer singular, they are palpably plural. My representation of the cybernaut is not seen as a character, personally, but a body of the concepts we all live by when we emerge in cyberspace. The media is our virtual landscape; our body the disturbance, the activity, the special ingredient. Materially, we exist in a landscape which singles us out according to our body. When we enter the cyberspace we become our tool, our technology. Our mind commits the change, while our body is only the mediator of the multitude of different experiences and activities our cyberbody can model. Our identity is anonymous, yet our digital identity is multiple and always subject to change.
<meta charset="utf-8">
<html>
<head>
<style>
area { cursor: pointer; }
</style>
<script src="jquery-1.11.1.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>