Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Красивая картинка-ссылка, предложение зарегистрироваться

Предыдущая тема Следующая тема Перейти вниз

Красивая картинка-ссылка, предложение зарегистрироваться

Сообщение автор Vadim в Пн 30 Июл - 19:54

Работает на всех версиях форума!

И снова у меня скрипт на основе существующих на этом форуме туториалов. Надеюсь их автор, не обидится!

Предлагаю всем желающим поставить в любое место форума кликабельную картинку, перенаправляющую гостей форума на страницу регистрации.

Картинка будет изменяться при наведении на нее указателя мыши, иметь всплывающую подсказку, а страница откроется в том же окне браузера, а не в новом.

Смотрим ДЕМО

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

В СSS:

Код:
.image.first,.image.second {
border:2px solid transparent;
margin:0;
padding:0;
}

.image.first {
opacity:1px;
display:block;
position:absolute;
z-index:100;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}

.image.first:hover {
opacity:0.00;
}
 
div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}
Создаём персональный виджет:

Имя виджета: Любое имя на ваше усмотрение
Использовать стандартный шаблон: Нет
Название виджета: Это поле оставить пустым

Содержание виджета:

Код:
<div align="center"><div id="Guestann" style="  position: fixed;z-index: 1000; bottom: 0px;
left:-50px; height:450px; <div align="center">
<div class=ImgField><a remove_blank.css href=" Ссылка на страницу регистрации ">
<img title="Нажмите здесь, если вы еще не зарегистрированы!"
<img class="image first" src="http://s48.radikal.ru/i120/1207/77/2a61a3597775.png">
<img class="image second" src="http://i062.radikal.ru/1207/44/03bfd0cd6af4.png"/>
</div></a>
Сохраняем.

Если у вас нет на главной странице виджетов, то активируем их на главной странице справа и перетаскиваем созданный виджет в правую колонку.

А для того что бы его скрыть, в CSS ставим код:

Код:
#content-container div#right {
width: 0px;
margin-right:0px;
}
#content-container div#content {
margin-right: 0px;
}

Если у вас есть видимые виджеты на главной странице то в CSS ставить ничего не надо, и этот виджет вставьте в ту колонку где у вас видимые виджеты.

Чтобы предложение регистрации видели только гости форума:
На виджете нажимите кнопку
и снимите галочки у всех кроме гостей. Не забудьте сохранить!

Опишу основные параметры виджета:
left:0px
Сдвиг картинки по горизонтали, если хотите подвинуть влево на 10px - пишите: left:-10px, если хотите подвинуть вправо на 10px - пишите: left:10px

height:450px
Сдвиг картинки по вертикали, чем больше цифра, тем выше поднимется картинка.

<div class=ImgField><a remove_blank.css href="Ссылка на страницу регистрации">
Обязательно поставьте здесь ссылку, на страницу регистрации вашего форума! Для этого зайдите на свой форум как гость, выберете в меню «Регистрация» и скопируйте адрес открывшейся страницы.

<img title="Нажмите здесь, если вы еще не зарегистрированы!"
Текст всплывающей подсказки. Показывается при наведение курсора на изображение.

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

<img class="image first" src="http://s48.radikal.ru/i120/1207/77/2a61a3597775.png">
Ссылка в этой строке отвечает за верхнее изображение.

<img class="image second" src="http://i062.radikal.ru/1207/44/03bfd0cd6af4.png"/>
Ссылка в этой строке отвечает за нижнее изображение.

Фактически мой туториал состоит из двух совмещенных скриптов Домового, за которые ему огромная признательность!

В демо я использовал две простые картинки, можете забирать, но все же советую создать индивидуальные.




Vadim
 
 

Пол : Мужчина
Сообщения : 542
Возраст : 28
Место обитания : Дом, семья, работа...
Карма : Без предупреждений
Благодарности : 55
Регистрация : 2012-03-01

http://anamnez.sosbb.ru/

Вернуться к началу Перейти вниз

Re: Красивая картинка-ссылка, предложение зарегистрироваться

Сообщение автор spammer в Пт 31 Авг - 14:35

ооо хорошая вещь)) + 22

spammer
 
 

Пол : Мужчина
Сообщения : 181
Возраст : 22
Место обитания : Хабаровск
Настроение : 39
Карма : Без предупреждений
Благодарности : 26
Регистрация : 2012-08-20

http:// http://anti-lcdev.sosbb.ru

Вернуться к началу Перейти вниз

Re: Красивая картинка-ссылка, предложение зарегистрироваться

Сообщение автор maxpayne в Пт 31 Авг - 23:10

Спасибо, поставил, работает! 13

maxpayne
Новичок

Пол : Мужчина
Сообщения : 5
Возраст : 16
Место обитания : Краснодар
Настроение : Не хочу в школу :(
Карма : Без предупреждений
Благодарности : 0
Регистрация : 2012-08-29

http://bbbonline.forum2x2.ru/

Вернуться к началу Перейти вниз

Re: Красивая картинка-ссылка, предложение зарегистрироваться

Сообщение автор Vadim в Сб 1 Сен - 10:45

@spammer пишет:ооо хорошая вещь)) + 22
Спасибо большое за отзыв!

Спасибо, поставил, работает!
Благодарю вас!

Vadim
 
 

Пол : Мужчина
Сообщения : 542
Возраст : 28
Место обитания : Дом, семья, работа...
Карма : Без предупреждений
Благодарности : 55
Регистрация : 2012-03-01

http://anamnez.sosbb.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения