Установка очень проста: 1). Заливаем картинку в корень сайта. 2). Вставляем данный код в любое место на страницах где будут отображаться часы (я поставил в шапку сайта, работает на всех страницах):
Код
<div style="position: fixed; bottom: 4pt; left: 17pt;"> <table><tr><td background="/time_bg.png" height="54px" width="126px"> <table><tr><td style="padding-left:32px;padding-top:1px"><span title="Time" color="#FF7200"><span title="Time" color="green" id="clockhack" style="font-size: 12pt; color: white;"></span></span></td></tr></table></td></tr></table> </div> <script type="text/javascript"> function refrClock2() { var d=new Date(); var s=d.getSeconds(); var m=d.getMinutes(); var h=d.getHours(); var day=d.getDay(); var date=d.getDate(); var month=d.getMonth(); var year=d.getFullYear(); var am_pm; if (s<10) {s="0" + s} if (m<10) {m="0" + m} document.getElementById("clockhack").innerHTML=h + ":" + m + ":" + s; setTimeout("refrClock2()",1000); } refrClock2(); </script> <script type="text/javascript"> initdragableElements(); </script> <!--U1HINT1Z--><script type="text/javascript"> (function () { function addEvent( object, type, handler ) { if ( !object.events ) object.events = {}; if ( !object.events[type] ) object.events[type] = []; function handle( e ) { e = e || window.event; if ( !e.pageX || !e.pageY ) { var html = document.documentElement, body = document.body; e.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0); e.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0); } handler.call( object, e ); } object.events[type].push( [ handler, handle ] ); if ( object.addEventListener ) { object.addEventListener( type, handle, false ); } else { object.attachEvent( 'on' + type, handle ); } } function removeEvent( object, type, handler ) { var events = object.events[type]; for ( var i = 0; i < events.length; i++ ) { if ( handler == events[i][0] || !handler ) { if ( object.removeEventListener ) { object.removeEventListener( type, events[i][1], false ); } else { object.detachEvent( 'on' + type, events[i][1] ); } } } } var nodes = document.all || document.getElementsByTagName( '*' ), tooltip = document.createElement( 'DIV' ); tooltip.style.display = 'none'; tooltip.style.position = 'absolute'; tooltip.style.backgroundColor = '#212121'; tooltip.style.color = '#919191'; tooltip.style.padding = '3px'; document.body.appendChild( tooltip ); for ( var i = 0; i < nodes.length; i++ ) { if ( nodes[i].title || nodes[i].alt ) { addEvent(nodes[i], 'mouseover', function ( e ) { var par = this.title ? 'title' : 'alt', text = this[par]; this.textcache = [ par, text ]; this[par] = ''; tooltip.style.top = e.pageY + 25; tooltip.style.left = e.pageX + 25; tooltip.innerHTML = text; tooltip.style.display = 'block'; addEvent(document, 'mousemove', document.moveHint = function ( ev ) { tooltip.style.top = ev.pageY + 25; tooltip.style.left = ev.pageX + 25; }); }); addEvent( nodes[i], 'mouseout', function () { tooltip.style.display = 'none'; this[ this.textcache[0] ] = this.textcache[1]; }); } } })(); </script>