Home icon Блог о сайтостроительстве » Сайтостроительство » Динамический логотип или кнопка

Динамический логотип или кнопка

14-12-2010, 08:07,   Просмотров: 1471,   Комментариев 2  
Динамическая кнопка или логотип всегда смотрятся лучше, при наведение курсора картинка меняется, создается эффект подвижности. В принципе, придать динамичности кнопкам сайта можно при помощи одного лишь css, однако, такой способ имеет свои недостатки, например: разворачивание не плавное, а браузер IE не воспринимает такую кнопку, как кнопку.
Самый простой способ сделать динамический логотип или кнопку (а также любой другой элемент сайта) это использовать js.

Инструкция.

Для начала, Вам понадобится ява скрипт:
js.zip [29,73 Kb] (cкачиваний: 82)
скачайте архив и распакуйте его в любой удобной директории, желательно там же, где лежат файлы шаблона, файлы css и другие js файлы.
Подключите эти файлы, добавьте в head сайта следующие строчки:

<script type="text/javascript" src="путь к файлам/mootools.js"></script>
<script type="text/javascript" src="путь к файлам/effects.js.php?lb=1&amp;re=1&amp;sl=1"></script>

Создайте в фотошопе два одинаковых логотипа с разными стилями, один назовите logo.png а второй logo_spotlight.png.
Положите их в отдельную папку, например logo. Можно конечно бросить к остальным картинкам, но так будет удобнее.
Добавьте стили для логотипа в основной css файл, впишите в него что-то вроде:

div#logo
{
    top: 0px;
    left: 0px;
}

Подключите вывод логотипа в Вашем шаблоне, в нужное место добавьте:

<div id="logo">
<a href="/" title="На главную"><span style="width: сколько нужно px; height: сколько нужно px; display: block; background: url('/ПОЛНЫЙ ПУТЬ/logo/logo.png')" class="spotlight"></span></a>
</div>

В результате, Вы получите динамический логотип, как например у этого сайта. Все просто, сложно только нарисовать логотип, если Вы полный ноль в фотошопе.

 (голосов: 2)

 

#1   dnovoro   18 июля 2011 23:47

Chto to ne poluchaetsya postavit na DLE, mozhet kto podskazhet net li sluchajno oshibok v skripte?
<a href="/" title="На главную"><span style="width: сколько нужно px; height: сколько нужно px; display: block; background: url('/ПОЛНЫЙ ПУТЬ/logo/logo.png')" class="spotlight"></span></a>
gde logo.png stavlyu pervuj logotype, a vtoroj izmenneuj pri navedenii ne poyavlyaetsya. v chem mozhet byt prichina. Java vrode podklyuchena
   

#2   admin   19 июля 2011 01:26

Не совсем понял вопрос, но причин по которым эффект может не работать много. Умедистесь что верно указали пути, и тут:

Цитата: dnovoro
<a href="/" title="На главную"><span style="width: сколько нужно px; height: сколько нужно px; display: block; background: url('/ПОЛНЫЙ ПУТЬ/logo/logo.png')" class="spotlight"></span></a>

все прописали правильно.

Вторая картинка должна называться logo_spotlight.png.
Также, после изменений, нужно сбросить кеш.
Иногда, очищение кеша на сайте не помогает, (когда например, несколько раз редактировали одну из картинок) тогда нужно просто задать другие имена картинкам, например: logo1_spotlight.png и logo1.png.