Как прописать живой баннер html ?

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X

1
2
Следующая
Показаны 1-15 из 16

#1 28 января 2017 в 20:50

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

Ставлю баннеры — кнопки на сайте, во пример postavy.info/pages/o-gorode-postavy-i-krae.html (две кнопки "Что посмотреть." верхняя прописана хтмл кодом нижняя в картинкой с ссылкой).

Когда на любой из баннеров наводишь курсор мышки -стрелочку, она меняется на курсор руку.

А хотелось бы что бы было вот как здесь на примере: braslaw.by/ наводишь курсор и сам баннер меняет как бы цвет, темнеет, тоесть визуально это красиво и как кнопка.

Я прописываю код html:

<a href="http://postavy.info/" target=_blank><img src="http://postavy.info/upload/000/u1/072/c9922c9b.png" width=255 height=88 alt="Что по смотреть?" border=0></a>

Подскажите пожалуйста варианты, как можно сделать именно html кодом так что бы баннер имел кнопочный красивый вид, с не большим затемнением.

Благодарю.

#2 28 января 2017 в 20:58

Забейте в поисковик "Hover Effect", "ховер-эффект" тд. и получите 100500 решений.

Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.

#3 28 января 2017 в 21:27

Забейте в поисковик "Hover Effect", "ховер-эффект" тд. и получите 100500 решений.

garry

Благодарю, ТОЛЬКО НЕ ПОНЯТНО ГДЕ СОЗДАВАТЬ КЛАСС И КАК....

Создаем класс для всех изображений

Изображение должны обязательно принадлежать классу pic. Он содержит информацию об расположении блока с изображением — float; о высоте и ширине блока — height и width; тип отображение, если изображении больше, чем размер блока — overflow, а также информацию об рамке — border, тени — box-shadow и отступе — margin. Полный CSS класса pic будет выглядеть так:

.pic {
border: 10px solid #fff;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;

-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}

Сегодня в 05:38

#4 29 января 2017 в 08:44

Как вариант:

<a href="http://postavy.info/" target=_blank><img src="http://postavy.info/upload/000/u1/072/c9922c9b.png"  class="pic" width=255 height=88 alt="Что по смотреть?" border=0></a>

Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.

#5 29 января 2017 в 09:43

Как вариант:

garry

Получился обычный баннер без эффекта…

#6 29 января 2017 в 09:48

А вы в стили свои добавили сам хувер для pic?

Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.

#7 29 января 2017 в 09:49

А вы в стили свои добавили сам хувер для pic?

garry

В том то и дело, что я не понял как именно и куда добавлять стили… и какие именно…

#8 29 января 2017 в 09:57

Судя по вашей теме установленной на сайте, то сюда postavy.info/templates/oneminima/sass/vendors/bootstrap/_reboot.scss
Но у вас используется формат .scss и скорее всего на вашем компе не стоит ничего, что смогло бы вам помочь сделать это.
По этому вам стоит поискать любой онлайн компилятор .scss, вставить туда нужные вам стили и уже скомпилированный добавить в выше написанный ваш файл.

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

Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.

#9 29 января 2017 в 10:04

Судя по вашей теме установленной на сайте, то сюда postavy.info/templates/oneminima/sass/vendors/bootstrap/_reboot.scss
Но у вас используется формат .scss и скорее всего на вашем компе не стоит ничего, что смогло бы вам помочь сделать это.
По этому вам стоит поискать любой онлайн компилятор .scss, вставить туда нужные вам стили и уже скомпилированный добавить в выше написанный ваш файл.

И кстати у вас на странице что ссылку дали, куча ошибок в консоле показывает, исправьте.

garry

Тоесть потом вставить просто хтмл блоком на сайт и будет работать?

#10 29 января 2017 в 10:06

Тоесть потом вставить просто хтмл блоком на сайт и будет работать?
@Aliaksandr

1. Прописать стили в ваш файл стилей, как выше написал
2. Вставить как вы выразились блок и будет работать. С прописанным классом у картинки.

Контент для ваших проектов. Копирайт всех видов от профессионалов. Создание и продвижение сайтов, реклама.

#11 29 января 2017 в 10:38

В том то и дело, что я не понял как именно и куда добавлять стили… и какие именно...
@Aliaksandr

Вставьте сразу после кода баннера (стили для примера, при наведении появляется тень):

 
<style type="text/css"> img.pic:hover {-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);} </style>

Это не по феншую, но зато быстро и понятно)
Дальше думаю разберетесь…

#12 29 января 2017 в 11:32

А хотелось бы что бы было вот как здесь
@Aliaksandr

Точно как там:

 
<div class="pichover"><a href="http://postavy.info/"></a></div>
 
<style type="text/css"> 
.pichover {
    background: rgba(0, 0, 0, 0) url(http://postavy.info/upload/000/u1/072/c9922c9b.png) 10% 50% no-repeat;
    width: 255px;
    height: 88px;
}
 
.pichover a {
    width: 255px;
    height: 88px;
    display: block;
}
 
.pichover a:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent) repeat scroll 0 0;
}
</style>

#13 30 января 2017 в 13:58

В том то и дело, что я не понял как именно и куда добавлять стили… и какие именно...
@Aliaksandr

Вставьте сразу после кода баннера (стили для примера, при наведении появляется тень):
 
 img.pic:hover {-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);} 
 
Это не по феншую, но зато быстро и понятно)
Дальше думаю разберетесь...

reload

Вставил, не появилась тень при наведении..

<a href="http://postavy.info/" target=_blank><img src="http://postavy.info/upload/000/u1/072/c9922c9b.png" width=255 height=88 alt="Что по смотреть?" border=0></a>
<style type="text/css"> img.pic:hover {-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);} </style>

#14 30 января 2017 в 13:59

А хотелось бы что бы было вот как здесь
@Aliaksandr

Точно как там:

 
 
 
 
.pichover {
    background: rgba(0, 0, 0, 0) url(http://postavy.info/upload/000/u1/072/c9922c9b.png) 10% 50% no-repeat;
    width: 255px;
    height: 88px;
}
 
.pichover a {
    width: 255px;
    height: 88px;
    display: block;
}
 
.pichover a:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent) repeat scroll 0 0;
}

Я не понимаю где это править...(

#15 30 января 2017 в 18:47

Я не понимаю где это править...(
@Aliaksandr

Вставлять в "Содержимое HTML блока", туда от куда скрин делали:

Иллюстрация

Вставил, не появилась тень при наведении..
@Aliaksandr

Не появляется, потому что вы уже внесли изменения, убрали class)

Будет работать если добавите этот class:

 
<img src="http://postavy.info/upload/000/u1/072/c9922c9b.png" width="255" height="88" alt="Что по смотреть?" class="pic" border="0">
 
<style type="text/css"> img.pic:hover {-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);} </style>

1
2
Следующая
Показаны 1-15 из 16

Вывод на печать части страницы

Как решить Арифметическое зада

Как прописать живой баннер html ?

Похожие темы

Как прописать title во внешней ссылке?

[ЕСТЬ РЕШЕНИЕ] Как прописать атрибут rel="canonical"

Живой поиск при добавлении контента

Настройка cron

Как прописать в main.tpl.php блок(или меню), чтобы он показывался только определенной группе пользователей.

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

InstantCMS Team

О проекте

Поддержка

Дополнения