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

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


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

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

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


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

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Как сделать копирайт изображением с доп. эфектами ?

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

Как сделать копирайт изображением с доп. эфектами ?

Сообщение автор Сказочник Зазеркалья в Пт 8 Мар - 4:28

Всем приветик. girl_yes
Я тут бьюсь над одной задачей, которая в общем сложновата. scratch

Хотелось бы узнать возможно ли сделать копирайт :

Спойлер:

Не буквами, а картинкой:

Спойлер:

И чтобы наводя на эту картинку курсором, можно было бы видеть плавный переход к другой картинке.

Вот нужные изображения:

Первое изображение:


Изображение после наведения курсором:


Такой эффект можно достичь таким кодом:

Код:
<div align="center"><div id="Guestann" style=" position:absolute;z-index: 1000; bottom: 0px;
right:1%; top:98%; <div align="center"><div class=ImgField><a remove_blank.css href="http://gothic-empire.mirbb.com">
<img class="image first" src="http://savepic.ru/4242790.png">
<img class="image second" src="http://savepic.ru/4236646.png"/>
</div></a>

Но проблема в том, что этот код странно работает в шаблонах.

А также хотелось бы чтобы это изображение имело ссылку, допустим на отдельную мою ХТЛМ страницу с описанием сайта.

Заранее спасибо. girl_yes


Последний раз редактировалось: Кардинал Мишель Картер (Пт 8 Мар - 17:09), всего редактировалось 1 раз(а)
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 25
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://help.forum2x2.ru

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

Re: Как сделать копирайт изображением с доп. эфектами ?

Сообщение автор Kiselboom в Пт 8 Мар - 10:40

в общем сложновата
Ничего "в общем сложноватаго" здесь нет...
Во всё, что вам нужно для этого:
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4

Изучайте, разбирайтесь.

Ну а если хотите плавную смену картинок, тогда:
Ссылка 5
avatar
Kiselboom
 

Мужчина

Сообщения : 234
Возраст : 23
Регистрация : 2011-01-25
Благодарности : 74

Без предупреждений

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

Re: Как сделать копирайт изображением с доп. эфектами ?

Сообщение автор Домовой в Пт 8 Мар - 10:55

В CSS

Код:
.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.7s;
-webkit-transition-duration:0.7s;
-moz-transition-duration:0.7s;
-o-transition-duration:0.7s;
-ms-transition-duration:0.7s;
}

.image.first:hover {
opacity:0.00;
}
 
div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding:0;
}
в шаблон туда где это должно стоять

Код:
<center> 
<div class=ImgField>
<a href="http://gothic-empire.mirbb.com" target="_blank"><img class="image first" src="http://savepic.ru/4245402.png"/></a>
<img class="image second" src="http://savepic.ru/4239258.png"/>
</div>
</center>
Пример
avatar
Домовой
 

Мужчина

Сообщения : 6800
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3220

Без предупреждений

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

Re: Как сделать копирайт изображением с доп. эфектами ?

Сообщение автор Сказочник Зазеркалья в Пт 8 Мар - 17:08

Домовой большое вам спасибо. girl_blush rose
Работает отлично и очень красиво. d_daisy
Темку можно закрывать. wink
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 25
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://help.forum2x2.ru

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

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


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