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:c3.jpg| | |||
[[File:c3.jpg|400px]] | |||
<meta charset="utf-8"> | <meta charset="utf-8"> |
Revision as of 11:01, 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>