Лицензия на материалы блога со скрытием по клику

Недавно посетил блог Andrey'я, в последнее время активно отписывающегося в комментариях — DebianWatch.com. Помимо статьи «Debian: краткая история большого проекта» нашёл там несколько интересных дизайнерских решений.

Примерно неделю тому назад я вставил в шаблон лицензию на материалы блога (вдохновил меня на это аналогичный блок в блоге virens'а «Записки дебианщика»). Но смотрелось это как-то не очень.

И вот на DebianWatch.com я вижу как раз то, что мне нужно: лицензия показана в колонке справа, а внизу висит только иконка Creative Commons. Прекрасно! 10 минут возни с шаблоном — и у меня уже есть такая же штуковина :)

Но всё неймётся: правая колонка теперь разрослась до невиданной высоты, что начинает нервировать, если пост маленький. В жертву приносится дерево постов, но колонка все равно слишком высокая. Тут на глаза попадается учебник по HTML/JavaScript и начинается почти часовое приключение :)

Нужно отметить, что web-дизайнер из меня никудышный, и JavaScript я не знаю.

Тем не менее, в течении часа — не без помощи добрых людей, конечно (см. пост скриптум) — моя задумка была реализована: по умолчанию отображается надпись «Показать лицензию», если по ней кликнуть, лицензия отображается, а внизу показывается кликабельная надпись «Скрыть лицензию». Делается это так:

1. Добавляем в правую колонку (или куда вы хотите пихнуть лицензию) гаджет «HTML/JavaScript»;
2. в заголовке пишем что-то вроде «Лицензия на материалы этого блога»;
3. в тело гаджета суём такой код:

   <div id="license-header" display="block" onclick="document.getElementById('license-body').style.display='block';
   document.getElementById('license-header').style.display='none'">
   <h5>Показать лицензию<h5>
   </h5></h5></div>
   
   <div id="license-body" style="display:none">
   Лицензия будет здесь
   <h5 onclick="document.getElementById('license-body').style.display='none';
   document.getElementById('license-header').style.display='block'">Скрыть лицензию</h5>
   </div>

4. надпись «Лицензия будет здесь» заменяем на собственно лицензию, сохраняем это всё — вуаля, лицензия со скрытием готова!

В обсуждении с комментаторами родилась идея: не скрывать картинку, которая содержится в лицензии, а сделать её кликабельной — своего рода кнопкой. Курсор при наведении меняется на «руку». Результат вы можете лицезреть справа, код — ниже:

<div id="license-header" onclick="toggleLicense()" onmouseover="document.body.style.cursor='pointer'" onmouseout="document.body.style.cursor='auto'">
<table align='center'>
<tr>
<td>
<script type="text/JavaScript">
function toggleLicense()
{
document.getElementById('license-body').style.display == 'none'? document.getElementById('license-body').style.display='block' : document.getElementById('license-body').style.display='none';
}                                                      
</script>
<img alt="Creative Commons License" style="border-width: 0pt;" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"/>
</td>
<td>
<span style="font-size:11px">кликните для показа/скрытия лицензии</span>
</td>
</tr>
</table>
</div>

<div id="license-body" style="display:none">
This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>.<br/>

Материалы сайта <a href="http://debiania.blogspot.com/">Debiania.blogspot.com</a> написаны <a href="http://www.blogger.com/profile/15979236009981641914">Programmaster</a>'ом и доступны на условиях лицензии Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Unported License. Вы можете копировать, распространять, показывать эту работу, и создавать производные работы <b>в некоммерческих целях на условиях</b>:<br/>
<ol><li>обязательной ссылки на автора (<a href="http://www.blogger.com/profile/15979236009981641914">Programmaster</a>, <a href="http://debiania.blogspot.com/">Debiania.blogspot.com</a>)</li><li>распространении любых производных работ на условиях этой же лицензии (<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license">ссылка на лицензию</a> обязательна!).</li></ol>Это означает, например, что Вы можете копировать тексты с этого сайта на свой, помещая ссылки на мой сайт и на условия лицензии, но не можете размещать рядом с этими текстами контекстную рекламу.<br/>
<b>Пожалуйста, соблюдайте условия лицензии!</b>
</div>

Если хочется ещё и иконку внизу страницы — это тоже несложно:

1. Открываем Панель инструментов Blogger;
2. переходим в «Макет»;
3. сменяем вкладку на «Изменить HTML»;
4. в самый конец кода, перед </body> ставим такой код:

   <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt='Creative Commons License' src='http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png'/></a>

5. готово!

И последнее на сегодня. Со временем вам наверняка захочется запихнуть ещё одну-две иконки рядом с предыдущей. Вот только если поставить теги img подряд, пусть даже в одну строку, изображения будут расположены подряд друг под другом. Выход — таблицы:

<table align='center'>
<tr>
<td>
<!-- Site Meter XHTML Strict 1.0 -->
<script src='http://s51.sitemeter.com/js/counter.js?site=s51debiania' type='text/javascript'>
</script>
<!-- Copyright (c)2006 Site Meter -->
</td>
<td>
<!-- Creative Commons License Logo -->
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt='Creative Commons License' src='http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png'/></a>
</td>
</tr>
</table>

Здесь мы видим два изображения (первое генерируется скриптом, но можете считать, что там тег img): иконки SiteMeter и Creative Commons.

Удачи ;)

P.S. Спасибо dmage и kane с irc://irc.turli.net/#linux за помощь в разборках с JavaScript.
Также выражаю благодарность Andrey'ю и Dr.AKULAvich'у за содержательные и креативные комментарии.

Копируете статью — поставьте ссылку!