<style type="text/css"> #at{ position:fixed; right:300px; z-index:+1000; top:6; } * html #at{position:relative;} .attab{ height:500px; width:30px; float:right; cursor:pointer; background:url(); } .atcontent{ float:center; background:url(URL GAMBAR 1) no-repeat 0 0 transparent; width:800px; height:700px;center scroll ; padding:56px 0 20px 5px; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:url() no-repeat;"> <center><div id="author"> <a href="javascript:void(0);" onclick="showHideAT()"> </a></div></center></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-500-at.offsetWidth).toString() + "px"; </script> <style type='text/css'> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5;F opacity: 0.5; -khtml-opacity: 0.5;} a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style> <div style='display:scroll; position:fixed; top:100px; right:1px;'> <a href="javascript:void(0);"onclick="showHideAT()"/> <img src="URL GAMBAR 1" alt="PUSH" title="CLICK ME" /></a> </div></div></div></div>