Cлайд-шоу "живые ссылки" модель 1, Виктор Кон

6. Слайд-шоу "Живые ссылки", модель: vkLL1obj

Мотивация

Практически все сайты интернета содержат ссылки на другие сайты. Есть сайты - диспетчеры, которые целиком состоят из ссылок на другие сайты с информацией. Но и на сайтах с информацией тоже могут стоять ссылки - это либо реклама, либо указание на предыдущие и последующие главы книги, либо ссылки на примеры и так далее. Ссылки являются наиболее сильной стороной интернета, а поисковые машины, то есть сайты поиска других сайтов по ключевым словам - это наиболее сильный инструмент поиска нужной информации. Используя javascript cсылки можно ставить на любой объект сайта, хотя первоначально для этого служил тег якоря <a href="ссылка">. Он и сейчас является основным инструментом кодирования ссылок на сайте. Ссылку можно поставить не только на текст, но и на картинку, а также на кнопку используя тег <button> или <input type="button">. С другой стороны, слайд-шоу призваны сделать показ картинок более компактным, когда в одном и том же окне показываются периодически сменяющие друг друга разные картинки. Слайд-шоу позволяет показать много картинок в виде массива, в котором вместо пространственной координаты положения картинок используется временная координата. В результате мы видим много картинок, но не в виде таблицы, а постепенно во времени. А если связать с каждой картинкой свой уникальный адрес ссылки, то мы получаем сжатие таблицы ссылок. Мы получаем возможность дать много ссылок в одном и том же месте, а не списком. Иногда это тоже полезно, потому что экономит место на сайте.

Таким образом, возникает идея создать объект на сайте, который я назвал "живые ссылки". Ссылки делаются на картинках, что красиво, и они живут в том смысле, что возникают и исчезают. Разумно в данном случае показывать маленькие картинки, то есть иконки тех сайтов, на которые делается ссылка. А в самом слайд шоу нет смысла ставить музыку и делать разные переходы. Вполне достаточно одного типа перехода. Можно использовать любой тип перехода из тех, что используются в более сложных анимациях, описанных, например, в статье номер 5. Я выбрал переход, в котором новая картинка расширяется из точки. Как было отмечено в статье номер 5, объекты на сайте должны иметь уникальные имена переменных и функций, значит нам надо снова использовать символ (`) для того, чтобы потом заменить его на уникальный номер. В данной статье будет рассмотрена модель, в которой при клике на картинке-ссылке открывается новое окно, в котором показывается новый сайт. Старый сайт при этом остается на экране как бы на втором плане. Данный объект уже был описан в книге "Советы сайто-писателям", но в несколько устаревшей форме, которая показывала просто идею как это делается. В этой статье предложен более продвинутый вариант.

Описание

Я буду предполагать, что объект "живые ссылки" вписывается в колонку определенной ширины. При этом перед окном анимации разумно поместить на сайт поясняющий текст с приглашением кликать на картинках, а после окна анимации хорошо бы дать название и очень краткую аннотацию того сайта, который появится после клика на ссылке, то есть снова переменный объект. Сама по себе картинка привлекает внимание, но она не может дать словесную информацию, которая иногда очень хорошо дополняет образ. При желании как первый текст, так и название-аннотацию можно не ставить на сайт, но лучше все же дать их код, так как поставить нужный код всегда сложнее, чем его убрать. Никаких кнопок на сайт не ставится. Анимация запускается автоматически и крутится все время, ее нельзя остановить. Она работает как флэш-анимация рекламы и фактически тоже является рекламой. То есть постоянно привлекает внимание к себе.

Что надо делать

Сначала я покажу полный код примера готового сайта, в котором комментариями указано где может быть расположен другой код. Так как текст не умещается в ширину и высоту, то удобно его скопировать в окно редактора с большими размерами. Напоминаю, что для этого надо нажать в показанном окне Ctrl-A и Ctrl-C, а в окне редактора Ctrl-V.

<html><head><title>Кон Виктор, заготовка программы живых ссылок</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<style type="text/css">
 p.a{text-align:center; color:black; font:normal 14px sans-serif;}
 #top`{position:relative; left:0; top:0; overflow:hidden;}
 #mww`{position:relative; display:block; left:0px; top:0px; overflow:hidden;}
 #pho`{position:absolute; left:0px; top:0px;}
 #obj`{position:absolute; display:block; left:0px; top:0px; overflow:hidden;}
 #img`{position:absolute; left:0px; top:0px;}
</style>
</head>
<body bgcolor=#e3e3ff >
<!-- Здесь могут быть дополнительные объекты сайта -->
<center>
<div id="top`">
 <p class="a">Клик на любой картинке открывает новые сайты</p>
 <div id="mww`"><div id="pho`"><img id="bgi`"></div>
  <div id="obj`"><div id="img`"><a href="javascript:link`()"><img id="fgi`"></a></div></div>
 </div>
 <p id="tt`" class="a"> </p>
</div> 
<script type="text/javascript">
 var im`,w`,h`,pau`,W`,H`;
 im`=10; w`=200; h`=150; pau`=5000; W`=900; H`=800;
 par` = [ pau`, 0, 0, 10, w`, h`, 45, 10];
 function geid(id){return document.getElementById(id)} var key`=true;
 var obj` = geid('obj`').style; var pho` = geid('pho`').style; var bgi` = geid('bgi`').style; 
 var mww` = geid('mww`').style; var img` = geid('img`').style; var fgi` = geid('fgi`').style; 
 var i`,ii`,j`,gl`,gt`,k`,kt`,n`,nm`,pl`,pt`,bl`,bt`,pa`,pause`,sx`,sy`,wc`,hc`,wi`,hi`,hrf`;
 i`=-1; ii`=0; pause`=0; n`=0; pl`=0; pt`=0; bl`=0; bt`=0; j`=0; pa`=0; wc`=0; hc`=0;
 ims` = [
 "ссылка на картинку 1",
 "ссылка на картинку 2",
    и так далее
 "ссылка на последнюю картинку" ];
 hres` = [
 "ссылка на сайт 1",
 "ссылка на сайт 2",
    и так далее
 "ссылка на последний сайт" ];
 ttcs` = [
 "название сайта 1",
 "название сайта 2",
    и так далее
 "название последнего сайта" ];
 imga` = new Array(); hre` = new Array(); 
 ttc` = new Array();
 for( k`=0; k` <= im`; k`++ ){imga`[k`] = new Image(); imga`[k`].src=ims`[k`]; hre`[k`]=hres`[k`];} 
 for( k`=0; k` <= im`; k`++ ){ttc`[k`]=ttcs`[k`];}
 function link`(){vk` = window.open(hrf`,'anim`','toolbar=no,scrollbars=yes,width='+W`+',height='+H`);}
 function param`(){mww`.width=w`; mww`.height=h`; obj`.width=w`; obj`.height=h`; 
  bgi`.width=w`; bgi`.height=h`; fgi`.width=w`; fgi`.height=h`; geid('top`').style.width=w`+6;}
 function move`(){
  if( key` ){i`++; if(i` > im`){i`=0;} ii`=i`-1; if(ii` < 0){ii`=im`;} 
   kt`=par`[7]; geid('bgi`').src=imga`[ii`].src; geid('fgi`').src=imga`[i`].src; 
   pho`.left=bl`; pho`.top=bt`; pause`=0; key`=false; nm`=par`[3]; hrf`=hre`[i`]; 
   geid('tt`').innerHTML=ttc`[i`];
   if( kt` == 10 ){wi`=par`[4]; hi`=par`[5]; sx`=wi`/nm`/2; sy`=hi`/nm`/2; pl`=par`[1]+wi`/2; pt`=par`[2]+hi`/2;
     obj`.left=pl`; obj`.top=pt`; wc`=0; hc`=0; obj`.width=wc`; obj`.height=hc`; gl`=-wi`/2; gt`=-hi`/2;
     img`.left=gl`; img`.top=gt`;}
  }else{
   if( n` < nm` ){n`++; pause`=par`[6];
    bl`=0; bt`=0; pho`.left=bl`; pho`.top=bt`;
    if( kt` == 10 ){wc` += 2*sx`; hc` += 2*sy`; pl` -= sx`; pt` -= sy`; gl`=(wc`-wi`)/2; gt`=(hc`-hi`)/2;
     obj`.left=pl`; obj`.top=pt`; img`.left=gl`; img`.top=gt`; obj`.width=wc`; obj`.height=hc`;}
   }else{pa`=par`[0];
    if(pa` == 0){j`=1;} j`++; if(j` == 1){pause`=pa`;}else{pause`=0; j`=0; n`=0; key`=true; bl`=0; bt`=0;}
  }}
  setTimeout("move`()", pause`); 
 }
 param`(); move`();
</script>
</center>
<!-- Здесь могут быть дополнительные объекты сайта -->
</body></html>

Теперь я объясню что надо делать. В том редакторе (лучше всего Notepad2) куда вы перенесли текст надо заменить символ (`) на уникальное число, которое не встречается в других анимациях вашего сайта. Я заменил на 0. После этого надо заполнить массивы ims,hres,ttcs, то есть поставить реальные ссылки на картинки, ссылки на сайты и подписи. Я указываю имена переменных без символа (`) который у меня заменен на 0. Затем надо задать правильные значения переменных im,w,h,pau,W,H. Эти переменные задаются во второй строке тега <script> сразу после их определения. При этом переменная im должна быть равна числу картинок минус 1, переменные w,h должны быть равны реальным значениям ширины и высоты картинок. Если они будут иметь другие значения, то картинки будут промасштабированы на эти значения, но этим не стоит злоупотреблять, потому что на масштабирование требуется работа процессора и памяти и это не так быстро.

Переменная pau задает время паузы между сменой кадра в миллисекундах, то есть 5000 задает 5 секунд. Параметры W,H задают размеры нового окна, в котором будет показан сайт по ссылке. То есть при клике на любую картинку откроется новое окно с такими размерами, в котором будет показан сайт по указанной ссылке. Это работает во всех браузерах, но иногда не работает в Экплорере, в частности в операционной системе Виста. В системе XP все работает, в остальных системах я не проверял. Эксплорер в Висте при определенных установках его работы открывает сайт в новой закладке старого окна и сохраняет размеры старого окна. К сожалению как это исправить не меняя установки браузера я не знаю. Вот и все. Пример сайта, на котором установлен представленный здесь объект можно посмотреть ЗДЕСЬ. Я сделал его строго по указанной выше инструкции.

Что нужно делать, если мы не хотим ставить текст над картинкой. Просто уничтожаем вот эту строку

<p class="a">Клик на любой картинке открывает новые сайты</p>

и все. Кстати ее текст можно редактировать по вашему вкусу. Можно не уничтожать, а просто задать пустое значение, только в этом случае место все равно будет занято. А если мы не хотим писать подписи под каждой картинкой, то тут сложнее. Надо уничтожить все строки, в которых встречаются переменные ttcs,ttc,tt. Ниже я укажу все эти строки

<p id="tt`" class="a"> </p> ttcs` = [ "название сайта 1", "название сайта 2", и так далее "название последнего сайта" ]; ttc` = new Array(); for( k`=0; k` <= im`; k`++ ){ttc`[k`]=ttcs`[k`];} geid('tt`').innerHTML=ttc`[i`];

Но лично я не советую это делать, так как с подписями намного информативнее.

В принципе, живые ссылки можно использовать и просто для анимации с подписями для каждого кадра, но без ссылок. Для этого надо убрать немного другой код, но я не буду его указывать. Кто сам сообразит - сделает. Можно также открывать не новый сайт в новом окне, а новый контент в старом окне браузера, но поверх старого контента. Эти варианты будут описаны в других статьях.

Виктор Кон, 21.10.2011