Javascript + Imagemap: The Glitch of the Cybernaut: Difference between revisions
No edit summary |
No edit summary |
||
Line 10: | Line 10: | ||
</style> | </style> | ||
<script src="jquery-1.11.1.min.js"> | <script src="jquery-1.11.1.min.js"> | ||
</script> | </script> | ||
</head> | </head> |
Revision as of 11:02, 1 October 2014
<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>