12-07-2012, 00:40
Kod, który użyłem (na komputerze może nie działać):
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>