Кнопка сайта с раскрывающимся кодом

 <a href="http://szenprogs.ru/"> <img src="http://szenprogs.ru/images/88x31x1.gif" width="88" height="31" alt="Программы, скрипты, инструкции" border="0"> </a>

Кнопка на сайте - это способ повысить свою цитируемость. На многих сайтах, на которых я бывал, кнопка сайта отображена лишь как изображение (вроде как, желающий сам код придумает), на некоторых код виден на всех страницах сайта в боковой панели (вариант удобный, но это портит дизайн), а некоторые размещают кнопку на отдельной странице (не каждый гость пожелает полезть на следующую страницу, только чтобы код получить). Опишу способ, где кнопка, в стандарте, видна как изображение, а кто захочет, сможет, не переходя по страницам, получить код.

Этот способ обладает следующими преимуществами:

Кнопка не портит дизайн сайта;
Метод кроссбраузерный;
Код кнопки виден только по желанию пользователя;
Если у пользователя отключен запуск JavaScript, то на странице будет видна и кнопка и ее код;
Код валидный для стандарта W3C.

Для реализации воспользуемся поддержкой браузером DHTML, стилей и JavaScript.

Сам код:

Code

<div style="text-align:center;">
  <a href="Путь_к_вашему_сайту"><img src="Путь_к_вашей_кнопке" width="88" height="31" alt="Подпись_к_вашей_кнопке" border="0"></a><br>
  <noscript><div>Код кнопки размером 88x31 для вставки на Ваш сайт:</div></noscript>
  <div id="idGetButtonMess" style="display:none;cursor:hand;" onclick="if(document.getElementById('idGetButton').style.display=='none') document.getElementById('idGetButton').style.display='block'; else document.getElementById('idGetButton').style.display='none';">Получить код кнопки</div>
  <div id="idGetButton" style="display:block;">
    <textarea onclick="this.focus(); this.select();" rows="8" cols="20" readonly>
      <a href="Путь_к_вашему_сайту"> <img src="Путь_к_вашей_кнопке" width="88" height="31" alt="Подпись_к_вашей_кнопке" border="0"> </a>
    </textarea>
  </div>
  <script type="text/javascript"></script>
</div>

Остается чуть поменять код и установить его на сайт. Меняем то, что выделено в коде цветом:

Путь_к_вашему_сайту - скажем, http://szenprogs.ru/;
Путь_к_вашей_кнопке - тут путь к Вашей кнопке;
Подпись_к_вашей_кнопке - подпись к кнопке, в стандарте, краткое описание ресурса.

Код можно изменить на Ваш вкус и цвет. Цветовых схем в коде не использовано, поэтому код можно использовать в чистом виде.

Вы можете выразить свою благодарность администрации портала отправив SMS-кой выбранное вами количество денежек:

Категория:	Скрипты
Просмотрено:	2422
Рейтинг:	4.6/8
Дата добавления:	20.05.2009 12:49, Среда
Добавил:	Szen
Теги:	кнопка, DHTML, кнопка сайта, JavaScript

Опечатка

Дополнительно

Внимание

Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.

Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.

Мини-форум

№ 0	Среда, 20.05.2009 12:49
Szen	Здесь вы можете задать вопрос или оставить комментарий по теме "Кнопка сайта с раскрывающимся кодом".
	Цитата Профиль

№ 1	Четверг, 21.05.2009 04:11
Mishgan
	Цитата Профиль

№ 2	Понедельник, 22.06.2009 23:40
andre-money	Спасибо! Один вопрос как поставить свою картинку на кнопку
	Цитата Профиль

№ 3	Четверг, 25.06.2009 11:41
Szen	andre-money, заливаете на свой сайт свою картинку. Меняете в коде текст "Путь_к_вашей_кнопке" на адрес кнопки, которую Вы залили на сайт.
	Цитата Профиль WWW

№ 4

Пятница, 29.01.2010 18:54

Allamar

Ребята помогите пожалуйста.
Я не программист и даже не любитель постройки сайтов. Но так получилось что у меня есть форум на котором нужно поставить кнопочку. Я её поставила - но она у меня двоится.
Висит и в правой и в левой колонке. а Нужно чтобы только в одной (любой).

вот ссылка http://night-empire.forum2x2.ru

Заранее спасибо за помощь

Цитата

Профиль

№ 5	Суббота, 30.01.2010 18:10
Szen	Allamar, я, почему-то, не нашел 2-х кнопок. У вас только одна, справа.
	Цитата Профиль WWW

№ 6	Понедельник, 01.02.2010 10:47
Allamar	Спасибо за внимание. И слева сверху есть ещё одна. Там кстати ещё фон в поле с кодом белый - его можно как-то изменить?
	Цитата Профиль

Учавствовать в обсуждении "Кнопка сайта с раскрывающимся кодом" могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Скрипты [33]

Скрипты на разных языках программирования и все что подходит под данное определение

Мой дневник [17]

Мои записи и наблюдения

Инструкции [16]

Инструкции к установке, настройке и использованию программ, а так-же ремонту и обслуживанию компьютера

Справочники [2]

Онлайн справочники по разным темам

Местоположение

Интересное

Загрузка...

День рождения

Поздравляем с днем рождения следующих друзей:
kola_haker(16), angel_neo(26), NVKirillof(39), alnika(32).
Желаем им счастья, здоровья, благополучия, любви и богатства!

С уважением, администрация сайта.