Перейти к содержимому


Выбрать шаблон и создать сайт

  • Закрытая тема Тема закрыта

Кнопка на css из двух картинок

#1 Sergio1982

Sergio1982
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 17 Февраль 2016 - 16:37

Добрый день.
Помогите пожалуйста сделать анимированную кнопку на css из двух картинок как на сайте http://mitropolit.info/ (Паломничество).
Я администрирую сайт http://vsr-kemerovo.cerkov.ru/, где и необходимо разместить данную кнопку. Однако здесь есть определенные нюансы.

 

У меня нет полномочий вносить изменения в html на главной странице сайта. Поэтому код типа:

" <a href="ССЫЛКА"><img style="border: 0px;" onmouseover="this.src='ССЫЛКА НА ИЗОБРАЖЕНИЕ №2';" onmouseout="this.src='ССЫЛКА НА ИЗОБРАЖЕНИЕ №1';" alt="" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ №1" width="108" height="150" /></a>"  

не работает из за политики безопасности.


 

 

Сообщение отредактировал BLIK: 17 Февраль 2016 - 16:59
убрал форматирование

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Кнопка для загрузки картинки
  2. Как вписать изображение в размер окна браузера при помощи html/css
  3. Кнопка на css из изображений
  4. Делаем симпатичные кнопки на CSS3
  5. Как сделать отступ от картинки в css?

#2 BLIK

BLIK
  • Супермодератор
  • 3 173 сообщений
  • Репутация: 632

Отправлено 17 Февраль 2016 - 17:03

@Sergio1982,Если я не ошибаюсь, то стоит Wordpress. Зачем вообще что то вставлять в файлы движка, когда в Wordpress есть редактор, переключитесь в редакторе в html режим и вставьте свой код на странице в нужное место.

 

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


  • 1


#3 ol3gran1

ol3gran1
  • Пользователь
  • 51 сообщений
  • Репутация: 16

Отправлено 18 Февраль 2016 - 01:02

.button-with-image {
	display: block;
	width: 80px; /* Ширина */
	height: 40px; /* Высота */
	background: url(http://savepic.ru/8657671.png) bottom; /* Склеенная картинка */
	text-indent: -99999px;
}
.button-with-image:hover {
	background-position: 0 0px;
}
<a href="#" class="button-with-image"></a>

  • 1

#4 Sergio1982

Sergio1982
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 22 Февраль 2016 - 13:08

Всем спасибо, подошел код 

HTML <div id="img-bablo"><a href="http://sait.u"></a></div>
CSS #Паломничество a {
background-image: url(http://sait.ru/files/2015/12/баннер.jpg);
width: 244px;
height: 50px;
display: block;
}

/* картинка сразу */
#Паломничество a:hover {
background-image: url(http://sait.ru/files/2016/02/111.png);
}

Тема закрыта.


Сообщение отредактировал BLIK: 22 Февраль 2016 - 16:22

  • 0


Оформление форума – IPBSkins.ru