0 Пользователей и 1 Гость просматривают эту тему.
  • 11 Ответов
  • 2269 Просмотров
*

FOGOT-BAstA

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
hover в редакторе Joomla 3
« : 05.05.2014, 12:07:15 »
День добрый. Как на изображения помещенное в материал/статью Joomla 3 сделать эффект hover прямо в редакторе статьи??
Что надо прописать?

Вот HTML код статьи (там картинки в таблице)
Код
<table style="height: 535px;" width="1009">
<tbody>
<tr>
<td><a href="selskokhozyajstvennaya-tekhnika" target="_blank"><hover {height: 133px; width: 400px;}><img src="images/kk1.gif" alt="" /></a></td>
<td style="text-align: right;"><a href="metro" target="_blank"><img src="images/mm1.gif" alt="" /></a></td>
</tr>
<tr>
<td> <a href="traktornaya-promyshlennost" target="_blank"><img src="images/tt1.gif" alt="" /></a></td>
<td> </td>
</tr>
</tbody>
</table>

хочется, чтобы при наведении на изображение оно увеличивалось!

Спасибо за помощь!
*

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
Re: hover в редакторе Joomla 3
« Ответ #1 : 05.05.2014, 16:43:05 »
вариантов много, но самый простой - к самой ссылке - <a href="... допишите класс, например class="link" и уже к нему пропишите правила отображения CSS - Ваше hover
*

FOGOT-BAstA

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: hover в редакторе Joomla 3
« Ответ #2 : 06.05.2014, 07:08:50 »
Можно пожалуйста наглядно, буду благодарен=)) Плохо знаю синтаксис 8)
*

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
Re: hover в редакторе Joomla 3
« Ответ #3 : 06.05.2014, 22:07:32 »
дописываем класс, например <table class="table1009"> затем в файле *.css (темплате или лаёт) дописываем
Код
.table1009 {height: 535px; width:1009px; border:none; и тд}
.table1009 a {color:#000; и тд}
.table1009 a:hover {color:#ff0000; и тд}
.table1009 a img (border:none; и тд)
table1009 a img:hover (height:133px; width:400px; и тд)
вот вкратце  как-то так
*

FOGOT-BAstA

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: hover в редакторе Joomla 3
« Ответ #4 : 07.05.2014, 08:17:34 »
Спасибо! Но я как раз хотел узнать можно ли прямо в редакторе материала сделать, без правки кода шаблона?
*

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
Re: hover в редакторе Joomla 3
« Ответ #5 : 07.05.2014, 11:24:42 »
Спасибо! Но я как раз хотел узнать можно ли прямо в редакторе материала сделать, без правки кода шаблона?
один раз добавить строки в файл template.css к примеру (это не файл шаблона, и ничего (коды, переменные) не нужно удалять) а просто дописать и затем в редакторе указать класс таблицы. Что может быть проще?
*

FOGOT-BAstA

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: hover в редакторе Joomla 3
« Ответ #6 : 07.05.2014, 11:35:03 »
Да кончено ничего сложного. Просто у меня бесплатный шаблон и там 7 стилей, и не охота их править каждый раз...
*

FOGOT-BAstA

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: hover в редакторе Joomla 3
« Ответ #7 : 08.05.2014, 12:06:45 »
Но все-таки не могу разобраться, почему он не применяет hover, когда пишу вот так:

Код
<table style="height: 535px;" width="1009">
<tbody>
<tr>
<td><a href="selskokhozyajstvennaya-tekhnika" target="_blank"><img [u]style="hover:width=500;"[/u] src="images/kk1.gif" alt="" /></a></td>

Ну и везде вообще ставил, не помогает!
« Последнее редактирование: 08.05.2014, 12:18:52 от FOGOT-BAstA »
*

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
Re: hover в редакторе Joomla 3
« Ответ #8 : 08.05.2014, 13:08:50 »
hover ---- относится к ссылке а не к картинке как у вас получается, да и сама запись style="..." какая-то замысловатая, поскольку здесь указывают только правила отображения, а не класс (hover) и тд
*

IzrA

  • Захожу иногда
  • 322
  • 27 / 0
Re: hover в редакторе Joomla 3
« Ответ #9 : 08.05.2014, 13:54:56 »
Но все-таки не могу разобраться, почему он не применяет hover, когда пишу вот так:

Код
<table style="height: 535px;" width="1009">
<tbody>
<tr>
<td><a href="selskokhozyajstvennaya-tekhnika" target="_blank"><img [u]style="hover:width=500;"[/u] src="images/kk1.gif" alt="" /></a></td>

Ну и везде вообще ставил, не помогает!
Так вы далеко не уедете.
http://htmlbook.ru/css/hover
http://htmlbook.ru/samcss/dochernie-selektory
http://htmlbook.ru/samcss/kontekstnye-selektory

P.S.
Редактор зло :)
Спасибо для меня слишком много. Стакан вина Плюс в репутацию - в самый раз.

Велосипедист — бедствие для экономики. Он не покупает автомобиля и не берет под него кредит. Не покупает бензин. Не пользуется услугами ремонтных мастерских. Не страхует «гражданскую ответственность». Не пользуется платными стоянками. Не страдает от ожирения. Да он еще и здоров, черт возьми! Здоровые люди не нужны для экономики. Они не покупают лекарства. Они не ходят к частным врачам. Они не увеличивают ВВП.
*

FOGOT-BAstA

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: hover в редакторе Joomla 3
« Ответ #10 : 12.05.2014, 08:42:53 »
ну ведь можно в начале прописать в <style> </style> параметры и потом их применить к изображению. Вот как здесь:

Код
<html>
 <head>
  <meta charset="utf-8" />
  <title>hover</title>
  <style>
   a:link {
    color: #0000d0; /* Цвет ссылок */
    padding: 2px; /* Поля вокруг текста */
   }
   a:hover {
    background: #786b59; /* Цвет фона под ссылкой */
    color: #ffe; /* Цвет ссылки */
   }
  </style>
 </head>
 <body>
  <p><a href="1.html">Ссылка 1</a></p>
  <p><a href="2.html">Ссылка 2</a></p>
  <p><a href="3.html">Ссылка 3</a></p>
 </body>
</html>

Только к меня уже table style есть...
*

FOGOT-BAstA

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: hover в редакторе Joomla 3
« Ответ #11 : 12.05.2014, 14:26:20 »
Короче сделал по-другому через onmouseover и onmouseout! Единственное что надо, так это абсолютно позиционировать и прописывать отступы, иначе при увеличении будут все остальные картинки съезжать!

Код
<table style="height:600px;" width="1100">
<tbody>
<tr>
<td style= "position:absolute;left:50px;top:15px;"> <a href="selskokhozyajstvennaya-tekhnika" target="_blank"><img src="images/kk1.gif" onmouseout="this.src='images/kk1.gif'" onmouseover="this.src='images/kk12.gif'" alt="" /></a></td>
<td style= "position:absolute;left:600px;top:15px;"><a href="metro" target="_blank"><img src="images/mm1.gif" onmouseout="this.src='images/mm1.gif'" onmouseover="this.src='images/mm12.gif'" alt="" /></a></td>
</tr>
<tr>
<td style= "position:absolute;left:50px;top:300px;"> <a href="traktornaya-promyshlennost" target="_blank"><img src="images/tt1.gif" onmouseout="this.src='images/tt1.gif'" onmouseover="this.src='images/tt12.gif'"  alt="" /></a></td>
<td> </td>
</tr>
</tbody>
</table>
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как поставить такой курсор на сайт Joomla?

Автор Romanych

Ответов: 0
Просмотров: 678
Последний ответ 05.11.2020, 21:45:29
от Romanych
Вопрос по CSS Joomla 3+

Автор HomoSapiens

Ответов: 8
Просмотров: 1166
Последний ответ 02.11.2020, 16:30:48
от Verhov526
Несколько вопросов про шаблон (Joomla! 3.9.1)

Автор int31

Ответов: 6
Просмотров: 933
Последний ответ 09.02.2020, 20:28:49
от AlexB
Как добавить сторонние кнопки CSS в модули и плагины Joomla?

Автор bayersoff

Ответов: 12
Просмотров: 5041
Последний ответ 23.12.2018, 17:42:46
от effrit
Увеличить межстрочный интервал в вертикальном меню Joomla 3

Автор Alan-y

Ответов: 6
Просмотров: 1625
Последний ответ 07.01.2018, 14:07:52
от NewUsers