Электронные книги от ЭлектроБук.ру



СМОТРЕТЬ >>>

Как сделать самый простой всплывающий блок с информацией?

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

То, о чём пойдёт речь, Вы наверняка, уже увидели, открыв эту страницу, если конечно, у Вас хорошая скорость Интернета. У меня ОН появляется через пару секунд. Именно о таком блоке сейчас поговорим.
Честно говоря, мне лично такая навязчивая реклама не нравится, равно как и она же по нашему современному телевидению, но такой способ рекламы на сайте существует и возможно действенен.

Реклама, в различных её проявлениях, всегда была, есть и будет, хотим ли мы этого или нет. И, соответственно, если есть желание разместить такого типа блок на своём сайте, пожалуйста, начнём.

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

Блок появляется при загрузке один раз

Этот код JavaScript выделите, скопируйте и разместите между тегами head. Менять и что-либо добавлять в код не стоит:

<script type="text/javascript" language="JavaScript1.2">

// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit //www.dynamicdrive.com
// This credit MUST stay intact for use

var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function dropornot(){
if (get_cookie("droppedin")==""){
window.onload=initbox
document.cookie="droppedin=yes"
}
}
dropornot()
</script>

Ниже представленный код таким же образом выделите, скопируйте и вставьте сразу после тега body:

<div id="dropin" style="position:absolute;visibility:hidden;left:30px;top:300px;width:230px;height:230px;background-color:#EBEBEB">
<div align="right"><a href="#" target="_blank" onClick="dismissbox();return false">
<img src="//www.yoursite.ru/images/close.gif" border="1" vspace="0" hspace="0" align="right" width="15" height="15" alt="закрыть">
</a></div>

<center><font style="font-size:19px; color:#FF0000;"><br>Полностью<br>автоматизированная<br>партнёрская программа</font><br><br><a href="URL рекламируемой страницы" target="_blank"><img src="Путь к изображению" border="0"></a><br><br>
<a href="URL рекламируемой страницы" target="_blank"><strong>Смотреть>>></strong></a>
</center>
</div>

Здесь можно изменять переменные, а именно: отступ слева и сверху, высоту и ширину самого блока, «background» блока, размеры кнопки закрытия. В коде проставьте свои данные - пути к изображению и кнопке закрытия, а также к рекламируемой странице. Рисунок кнопки находится в папке «images» в учебном материале. (На второй странице.)