Подарок своими руками

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

Сначала мы создадим этот сундучок и посмотрим, как он выглядит с содержимым. Для этого копируем весь HTML код спойлера, который выглядит так:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Здесь Ваш текст, скрипт или картинка

<br>
</div>
</div>
</div>

 После копирования вставляем этот код себе в блокнот или в самый простой текстовый редактор на своём компьютере, чтобы убрать лишнее форматирование и ссылку источника, откуда вы скопировали код. Снова копируем его с блокнота и вставляем в сообщение в режиме HTML, Создать.  Я выполнила все действия на этой странице, вот что получилось:

Spoiler:

Здесь Ваш текст, скрипт или картинка

При нажатии на кнопку наш созданный сундучок открывается и мы видим внутри слова: Здесь Ваш текст, скрипт или картинка.  Это обозначает, что мы можем вместо этих слов аккуратно вставить в данный код опять же в режиме HTML код картинки, в качестве подарка. Название сундучка Spoiler можно тоже потом удалить.

А вот и код нашего подарка - милого симпатичного кролика:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-xxWqXZ709Lo/UjoxHf_nwSI/AAAAAAAAB_w/elpY0e64MaI/s1600/krolik.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-xxWqXZ709Lo/UjoxHf_nwSI/AAAAAAAAB_w/elpY0e64MaI/s320/krolik.gif" width="320" /></a></div>

Выполняем все действия с этим кодом, как с предыдущим, то есть заносим его в блокнот и оттуда вставляем в сообщение вместо указанных слов предыдущего кода в режиме HTML, Создать. 

Принимайте Ваш подарочек!

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