Naciskanie przycisku - Wersja do druku

Kod:
<html> 





<head> 





    <title>Custom Button</title> 





    <meta name="viewport" content="width=300" /> 





    <meta name="viewport" content="initial-scale=1" /> 





 





<style> 





.myButton { 





    

    border: 4 px outset #c0c0c0; 





    background-color: #e0e0e0; 





    width:100 px; 





    padding: 10 px; 





    text-align:center; 





    border-radius: 18 px; 





} 





 





.mybutton.pressed { 





    border: 4 px outset black; 





    background-color: #808080; 





} 





</style> 





 





<script type="text/javascript"> 





var can; 





var ctx; 





var but1; 





// state variable tracks whether button is pressed 





var but1press; 





 





function init() { 





    but1 = document.getElementById("but1"); 





    can = document.getElementById("can"); 





    ctx = can.getContext("2d"); 





    but1press = 0; 





} 





 





function press1() { 





    // change state variable 





    but1press = 1; 





    // change button style 





    but1.className="myButton pressed"; 





    // do something on the canvas 





    can.src="z.html"; 





    





} 





 





function release1() { 





    // button 1 may or may not be pressed when mouse button comes up 





    // or touch ends. 





    // if button is pressed, release it and do something on the canvas 





    if (but1press) { 





        but1press = 0; 





        // revert button style 





        but1.className="myButton"; 





        // do something on the canvas 





        can.src="y.html";





      



    } 





} 

</script> 

</head> 



<body onload="init()" onmouseup="release1()" ontouchcancel="release1()"> 



<iframe id="can" src="z.html" width="500" height="500" style="width: 500px; height: 500px;"></iframe> 



<div id="but1" class="myButton" 

        onmousedown="press1()" onmouseup="release1()" 

        ontouchstart="press1()" ontouchend="release1()"> 

 Click Me 

</div> 

</body> 

</html>