<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script> <style type="text/css"> .clock_face{ width: 200px; height: 200px; background-image: url("img/clock_face.png"); position: relative; } .clock_hours, .clock_minutes, .clock_seconds{ width:200px; height:200px; position:absolute; top:0; left:0; } </style> <script type="text/javascript"> $(function(){ analog_clock(); }); function analog_clock(){ today = new Date(); var hour = today.getHours(); var minute = today.getMinutes(); var second = today.getSeconds(); $('#clock_hours_hand').rotate(hour*30+minute/2); $('#clock_minutes_hand').rotate(minute*6+second/10); $('#clock_seconds_hand').rotate(second*6); setTimeout("analog_clock()",1000); } </script> </head> <body> <div class="clock_face"> <div class="clock_hours"><img src="img/clock_hours_hand.png" id="clock_hours_hand" /></div> <div class="clock_minutes"><img src="img/clock_minutes_hand.png" id="clock_minutes_hand" /></div> <div class="clock_seconds"><img src="img/clock_seconds_hand.png" id="clock_seconds_hand" /></div> </div> </body> </html>