La technique consiste à afficher une partie de cette image dans un cadre de dimensions données.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>switch slide</title>
<style>
#sw {
height:52px;
background-repeat:no-repeat;
border-radius: 5px;
width: 176px;
}
@-webkit-keyframes on2off {
from {background: url(./sw10.jpg) -13px -18px;}
to {background: url(./sw10.jpg) -114px -18px;}
}
@-webkit-keyframes off2on {
from {background: url(./sw10.jpg) -114px -18px;}
to {background: url(./sw10.jpg) -13px -18px;}
}
</style>
</head>
<body onload="tog()">
<div id="sw" onclick="tog()"></div>
<script>
var key=0;
function tog() {
var but=document.getElementById("sw").style;
if(key==1) but.WebkitAnimation = "off2on 0.5s forwards";
else but.WebkitAnimation = "on2off 0.5s forwards";
window.location.href="./bts.php?st=" + key;
key= (++key & 1);
}
</script>
</body>
</html>
Lecture du code bientôt
Aucun commentaire:
Enregistrer un commentaire