Настройка скользящей кнопки
Господа, нашел скрипт скользящей формы отправки E-mail, сделал из формы обычную кнопку, точнее картинку с ссылкой. В этом коде картинка появляется в верхнем левом углу страницы и по диагонали спускается к установленным координатам, после чего, при прокрутке страницы вверх вниз картинка скользит вместе с видимой частью страницы, т.е. всегда перед Вами. Вопрос вот в чем: "Как сделать, чтобы картинка при открытии страницы ни откуда не спускалась, а была сразу на месте установленных координат?"
Вот сам код страницы со скриптом:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="AceHTML 5 Pro">
</head>
<body>
<script>
var hX = -200;
var vY = -210;
</script>
<div id="image1" style="position:absolute; overflow:hidden; left:50px; top:50px; width:48px; height:48px; z-index:0"><a href="http://invisible.ax3.net/forum/index.php"><img src="3237.png" alt="" border=0 width=48 height=48></div>
<script>
var nn=(navigator.appName.indexOf("Netscape")!=-1);
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function image1(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fm=function(){var pX, pY;
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fm()',33);};
return L;}
image1(hX,vY,'image1').Fm();
</script>
</body>
</html>
С Java не дружу, методом научного тыка ничего не получается, при удалении каких-либо строк кода, картинка стоит на одном месте, при изменении числа 33, просто меняется скорость спуска картинки к установленным координатам... |
Для того, чтобы:
Цитата:
<div style="display:block;position:absolute;z-index:99;top:100px;left:20px;width:300px;height:400px;">тут всё что нужно и картинка тоже</div> |
Извините конечно, но по моему Вы меня не правильно поняли, если пользоваться Вашим кодом, то картинка не скользит, а все время на одном месте, т.е. прокручивается вместе с страницей, а нужно чтобы страница прокручивалась, а картинка нет, т.е. оставалась всегда на виду, что и делает мой скрипт. Просто он (скрипт) делает больше чем нужно, поэтому необходимо убрать так называемое "появление" картинки (чтоб она не спускалась с верхнего левого угла, а потом скользила по странице, а была на воем месте:
<script> var hX = -200; var vY = -210; </script> без всяких появлений и выполнялись основные функции скрипта, т.е. картинка при прокрутке страницы остается все время на виду.:) |
|
Господа, благодарю Вас за помощь, нашел решение проблемы, правда не из Ваших подсказок, но все-равно спасибо, без Вас не нашел бы!
Кому интересно вот моя инструкция:
########################################################################################################################################################################################
Как установить скользящую картинку
########################################################################################################################################################################################
1)
Вставляем перед тегом <html> всамом вверху страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
########################################################################################################################################################################################
2)
Вставляем после <style type="text/css">
#cat {display:block; top:180px; left:827px; position:fixed; z-index:116;}
Внимание не забываем смотреть номер последнего (z-index), иначе картинку будет невидно!!!
top:180px; left:827px; координаты нахождения картинки на странице!!!
########################################################################################################################################################################################
3)
Вставляем между <body> и </body>
<div id="cat"><a href="http://invisible.ax3.net"><img src="images/3237.png" alt="Форум" border=0 width=48 height=48></a></div>
<div id="cat"> идентификатор блока из CSS (пункт 2)
Ставим border=0, т.к. картинка с ссылкой, чтобы небыло бардюра, т.к. светится цветом ссылки!!!
width=48 height=48 размеры самой картинки!!!
<a href="http://invisible.ax3.net"> ссылка при нажатии на картинку!!!
########################################################################################################################################################################################
|
position: fixed Internet Explorer 6 и ниже не поддерживает данный аргумент :D Как всегда |
InviS А вот для этого есть вот чего!!!
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
|
:)
|
| Часовой пояс GMT +3, время: 19:41. |