Текстово-графический блок

Карточка баннера
Подготовка баннера
1. Скрипт для текстово-графического блока на кодах JavaScript / Poster / Extension
2. Скрипт для текстово-графического блока на коде Ajax
Загрузка баннера
Полезные ссылки

1. Карточка баннера

Описание:

изображение и подпись к нему.

Тип кода:

JavaScript, Poster, Extension, Ajax.

Пример:

https://www.adriver.ru/doc/ban/examples/tgb/.

Подробнее:

в большинстве случаев формат текстово-графических блоков одинаковый, меняется только текст и изображения. При наведении на малое изображение (100×100 px) курсора мыши, оно раскрывается до своего полного размера, закрывая контент страницы. Размер большого изображения — 200×200 px, загружать нужно только его. При клике по изображению и по тексту происходит переход по URL, заданному для баннера в веб-интерфейсе. Вы можете указать альтернативный URL для клика по тексту. Цвет текста — чёрный.

Примечание: В случае необходимости показывать баннер при доскролле до баннерного места, можно воспользоваться кодом Poster или специальным кодом Ajax. В остальных случаях используйте стандартные коды Ajax или Extension.

2. Подготовка баннера

2.1. Скрипт для текстово-графического блока на кодах JavaScript / Poster / Extension

/****** Editable block ******/
var ar_picture = ‘ar_picture_template1’;
var ar_text = ‘ar_text_template1’;
var ar_direction = ‘ar_direction_template1’;
var ar_alt_link = ‘ar_alt_link_template1’;
var ar_pix = ‘ar_pix_template1′;

//***************************
// Last edit by Alexandr Zonov
function ar_sendPix(s,b,i){if(!s)return;var d=parent.document;s=ar_rnd_rep(s.replace(/!\[ref\]/,escape(d.referrer||’unknown’)));if(b=d.body){i=d.createElement(‘IMG’);i.style.position=’absolute’;i.style.width=i.style.height=’0px’;i.onload=i.onerror=function(){b.removeChild(i);i=b=null};i.src=s;b.insertBefore(i,b.firstChild);}else new Image().src=s;return true}
function ar_rnd_rep(s){return s.replace(/!\[rnd\]/g,RndNum4NoCash)}
function ar_c(s){return !s||(/^http(s|):\/\/|^\/\//i).test(s)?s:CompPath+s}

ar_pass = unescape(window.ar_pass || ”);
ar_bnum = window.ar_bnum || 1;
ar_picture = ar_rnd_rep(ar_c(ar_picture));

parent.ar_sendPix = ar_sendPix;

ar_sendPix(ar_pix);

var ar_html=’<div style="position:relative;width:100%;height:100px"><a onclick="return ar_sendPix(\''+ar_pass+'\');" href="'+CgiHref+'" style="position:absolute;left:0px;width:100px;height:100px;z-index:1;" target="_blank"><img decoding="async" id="ar_img'+ar_bnum+'" border=0 width="100%" height="100%" src="'+ar_picture+'"></a><div style="margin-left:110px;"><a onclick="return ar_sendPix(\''+ar_pass+'\');" href="'+CgiHref+(ar_alt_link?'&rleurl='+escape(ar_alt_link):'')+'" target="_blank" style="color:#000000;text-decoration:none;">‘+ar_text+’</a></div></div>‘;

var ad_fr = parent.document.getElementById(‘ad_ph_’+ar_bnum);

if (self!=parent&&ad_fr) {
	ad_fr.innerHTML=ar_html;
	ad_fr.style.display=’block’;
	setTimeout(“document.close();”,1000);
} else document.write(ar_html);

(function(){
	var e = parent.document.getElementById(‘ar_img’+ar_bnum);
	if(e){
		e.onmouseover = ar_show;
		e.onmouseout = ar_hide;
		e.direction = ar_direction;
		if(parent==self) e.ext = 0;
		else e.ext = 1;
		ar_bnum++;
	}
	else setTimeout(arguments.callee,100);
})();

Чтобы получить скрипт для вашего баннера, заполните форму:

Изображение:

Текст:
AdRiver – система управления интернет-рекламой №1

Направление масштабирования:

Альтернативный URL:

Вызов стороннего счётчика:

Нажмите на кнопку

Скрипт для вашего баннера:

Пояснения к полям формы:

Изображение

впишите ваше имя файла. Если изображение загружается со стороннего сервера, впишите полный адрес, начинающийся с «http://» или «https://». В последнем случае, загружать файл через интерфейс системы не нужно

Текст

впишите текст, который вы хотите видеть рядом с изображением

Направление масштабирования

в каком направлении изображение раскрывается до своего полного размера. Выберите один из вариантов

Альтернативный URL

альтернативный адрес перехода при клике по текстовому полю. При этом, при клике по картинке переход осуществляет по адресу, указанному в веб-интерфейсе. Впишите полный адрес, начинающийся с «http://» или «https://». Если альтернативный адрес перехода не требуется, оставьте поле пустым

Вызов стороннего счётчика

впишите ссылку на пиксель-аудит. Если не нужен, оставьте пустым

Создайте новый текстовый файл. Для этого в операционной системе Windows:

Нажмите на кнопку Пуск
Щелчком мыши последовательно выберите пункты Все программы — Стандартные — Блокнот.

Скопируйте текст скрипта для вашего баннера и вставьте в созданный файл. Сохраните файл с именем script.js. Баннер готов к загрузке.

Размер загружаемых файлов должен соответствовать спецификации.

2.2. Скрипт для текстово-графического блока на коде Ajax

/****** Editable block ******/
var ar_picture		= 'ar_picture_template';
var ar_size			= 'ar_size_template';
var ar_big_size		= 'ar_big_size_template';
var ar_text			= 'ar_text_template';
var ar_direction		= 'ar_direction_template'; // 0 - no animate, 1 - down, 2 - center, 3 - up
var ar_alt_link		= 'ar_alt_link_template';
var ar_pix			= 'ar_pix_template';

//***************************
/* Do not touch any below */
ar_size = parseInt(ar_size);
ar_big_size = parseInt(ar_big_size);
var a = adriver(ar_ph), ar_time = 300;
new adriver.Plugin.require("pixel.adriver", "functions.adriver", "makeImage.adriver", "animate.adriver").onLoadComplete(function(){
	a.onDomReady(function(){
		a.sendPixel(ar_pix);
		var holder = a.addDiv(a.p, {position: 'relative', height: a.normalize(ar_size)});
		var pict = a.addDiv(holder, {position: 'absolute', overflow: 'hidden', left: '0px', width: a.normalize(ar_size), height: a.normalize(ar_size), zIndex: 1}, a.makeImage(ar_picture));
		a.addDiv(holder, {marginLeft: a.normalize(ar_size+10)}, '<a href="'+a.reply.cgihref+(ar_alt_link?'&rleurl='+escape(ar_alt_link):'') 			+'" target="'+a.reply.target+'" style="color:#000000;text-decoration:none;">'+ar_text+'</a>');
		if (ar_direction!=0){
			pict.onmouseover = function(){
				this.style.zIndex = this.parentNode.style.zIndex = this.parentNode.parentNode.style.zIndex = 2;
				adriver.animate.resizeImage(a, this, this.offsetWidth, ar_big_size, ar_time, ar_direction, 1);
			}
			pict.onmouseout = function(){
				this.style.zIndex = this.parentNode.style.zIndex = this.parentNode.parentNode.style.zIndex = 1;
				adriver.animate.resizeImage(a, this, ar_size, this.offsetWidth, ar_time, ar_direction, 0);
			}
		}
		a.loadComplete();
	})
});