Рекомендовать карту

Плавающая панель-баннер

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Плавающее вверх и вниз изображение, которое Вы видите слева оживит любую web-страницу, оно остаётся в поле зрения при прокрутке страницы пользователем. Каждый может решить для себя, во-первых, нужно ли ему это и если нужно, то как данный эффект применить на своём сайте. Я, например, попытался применить эффект для анонсирования RSS-ленты.

Для реализации этого эффекта просто добавьте весь код целиком в раздел body страницы и проставьте свои ссылки и название изображения. Код предпочтительно добавлять либо в начале страницы либо в самом её конце.


<!--Плавающая панелька-->
<div id="point1" STYLE="position:absolute;visibility:visible;">

<table border="0">
<tr>
<td>
<a href="//feeds.feedburner.com/Dynamic-siteru" target="_blank">
<img src="img/ddaward.png" width="100" height="100" alt="" border="0">
</a>
</td>
</tr>
<tr>
<td>
<center><a href="//feeds.feedburner.com/Dynamic-siteru" target="_blank">
<font face="Arial" size="2" color="#0000FF">RSS-ЛЕНТА</font>
</a></center>
</td>
</tr>
</table>

</div>

<script type="text/javascript" LANGUAGE="JavaScript1.2">
var XX=20; // X position of the scrolling objects
var xstep=1;
var delay_time=60;
var YY=0;  
var ch=0;
var oh=0;
var yon=0;
var ns4=document.layers?1:0
var ie=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
if(ie){
YY=document.body.clientHeight;
point1.style.top=YY;
}
else if (ns4){
YY=window.innerHeight;
document.point1.pageY=YY;
document.point1.visibility="hidden";
}
else if (ns6){
YY=window.innerHeight
document.getElementById('point1').style.top=YY
}
function reloc1()
{
if(yon==0){YY=YY-xstep;}
else{YY=YY+xstep;}
if (ie){
ch=document.body.clientHeight;
oh=point1.offsetHeight;
}
else if (ns4){
ch=window.innerHeight;
oh=document.point1.clip.height;
}
else if (ns6){
ch=window.innerHeight
oh=document.getElementById("point1").offsetHeight
}
if(YY<0){yon=1;YY=0;}
if(YY>=(ch-oh)){yon=0;YY=(ch-oh);}
if(ie){
point1.style.left=XX;
point1.style.top=YY+document.body.scrollTop;
}
else if (ns4){
document.point1.pageX=XX;
document.point1.pageY=YY+window.pageYOffset;
}
else if (ns6){
document.getElementById("point1").style.left=XX
document.getElementById("point1").style.top=YY+window.pageYOffset
}

}
function onad()
{
if(ns4)
document.point1.visibility="visible";
loopfunc();
}
function loopfunc()
{
reloc1();
setTimeout('loopfunc()',delay_time);
}
if (ie||ns4||ns6)
window.onload=onad
</script>
<!--/Плавающая панелька-->

          Сюда вставляйте URL страницы, на которую будет переходить пользователь после клика на изображение подвижной панельки или на ссылку снизу её;

          В этой строке пропишите путь к изображению, проставьте необходимые размеры и описание;

          Сюда впишите название рекламируемой вами страницы.

Кстати, «прицепить» к панельке можно не одну, а несколько ссылок. Просто нужно продублировать участок кода со ссылкой:


<tr>
<td>
<center><a href="URL второй ссылки" target="_blank">
<font face="Arial" size="2" color="#0000FF">название второй ссылки</font>
</a></center>
</td>
</tr>



Небольшой, но полезный совет относительно изображения

Как Вы знаете, любое изображение в любом формате имеет фон. Фон может быть однотонным и с палитрой цветов. Если в качестве изображения Вы выбрали картинку в форме квадрата или прямоугольника, проблем не будет. В нашем же случае, когда изображение имеет форму шара, цветной фон будет портить всю картину. Представьте себе, что этот двигающийся шарик CSS будет иметь квадратный или прямоугольный цветной фон, отличный от фона основной страницы и её элементов.

Примерно так это будет выглядеть:

Когда изображение имеет форму шара, цветной фон будет портить всю картину

Чтобы избежать этой маленькой неприятности необходимо фон картинки сделать прозрачным. В этом варианте контур изображения будет граничить непосредственно с фоном страницы. Об этом я уже писал НА ЭТОЙ СТРАНИЦЕ. Там же Вы найдёте адрес онлайн-сервиса для изменения фона изображения.



Исходники (44 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


Спасибо за внимание. Желаю успехов! «Не переключайтесь». Пока! L.M.


Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика