Javascript + Imagemap: The Glitch of the Cybernaut: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
[https://www.facebook.com/video.php?v=10152703084507419&l=6032100522254006352 Demo Video on Facebook] | [https://www.facebook.com/video.php?v=10152703084507419&l=6032100522254006352 Demo Video on Facebook] | ||
[[File: | [[File:c3.jpg|thumbnail]] | ||
<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> | |||
<img id="image" src="c1.bmp" border="0" alt="" usemap="#map" src="c1.bmp"/> | |||
<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> |
Revision as of 10:59, 1 October 2014
<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>