Новости Joomla

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

mebeleko

  • Осваиваюсь на форуме
  • 41
  • 2 / 0
Задача достаточно простая и об этом много информации в сети, но у меня не получается реализовать смену картинки при наведении мышью.

Для упрощения сделал простой сайт вот здесь:

noartistname . com / web / index.php (без пробелов)

На сайт загружено 4 картинки: 2 картинки для кнопки test 1 (когда на нее наводим и когда она выключена) и 2 картинки для кнопки test 2 (тоже самое). Все просто: при наведении на test 1 хочу чтобы менялась картинка и тоже самое для test 2. Пытался сделать с помощью класса hoover - не получается, через java script - вместо картинки почему то вопросики.

Вот код index.php:

Код
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Привет!</title>
</head>
<body>
<div class="text">Вы видите меню под углом 45 градусов!</div>
<div class="image2"></div>
<div class="image1"></div>
</body>
</html>

Вот код style.css:

Код
.text
{
font-family: Arial;
font-weight: bold;
font-size: 14px;
text-align: center;
}

.image1
{
background-image:url('button_1.png');
height: 60px;
width: 60px;
}

.image2

{
margin-bottom: -5px;
margin-left: 55px;
background-image:url('button_2.png');
height: 60px;
width: 60px;
}

Подскажите как это реализовать правильно?
*

zlideni

  • Захожу иногда
  • 337
  • 76 / 0
попробуй прописать
div.image1:hover {background: другая картинка;}
*

mebeleko

  • Осваиваюсь на форуме
  • 41
  • 2 / 0
Оперативно! Спасибо большое, получилось! Вот нигде в интернете такого не смог найти. А еще вопрос: можно как-то такое меню реализовать, чтобы вот так выглядело и работало, но когда наводишь только на закругленный прямоугольник (сейчас если даже навести на границу картинки уже она меняется)?
*

zlideni

  • Захожу иногда
  • 337
  • 76 / 0
В Joomla 1.5 в Legacy Mode

[вложение удалено Администратором]
*

mebeleko

  • Осваиваюсь на форуме
  • 41
  • 2 / 0
Кстати, в эксплорере эта функция не работает! Почему? zlideni, посмотри мою страницу, при наведении рисунок не меняется, а в Safari меняется!
*

zlideni

  • Захожу иногда
  • 337
  • 76 / 0
первые версий IE не поддерживают hover.... нужны сторонние скрипты...
Попробуй модуль который я прикрепил к предыдущему сообщению...
*

mebeleko

  • Осваиваюсь на форуме
  • 41
  • 2 / 0
Хорошо, просто я не в Жумле :) Я сайт с нуля сам делаю :)
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
попробуй прописать
div.image1:hover {background: другая картинка;}
Не лучшее решение. При таком подходе опять будет запрос на сервер и ожидание, чтобы подгрузить новую картинку.

первые версий IE не поддерживают hover.... нужны сторонние скрипты...
Не вводите в заблуждения. Уточняйте, что поддерживает только для тега <a>, а вот для других элементов нужны скрипты.
*

zlideni

  • Захожу иногда
  • 337
  • 76 / 0
gdx, Вы совершено правы...
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Не работают стили CSS в html

Автор ВикуЛя

Ответов: 1
Просмотров: 1299
Последний ответ 27.05.2021, 12:31:15
от ShopES
html код для сайта

Автор lexin

Ответов: 0
Просмотров: 1511
Последний ответ 13.12.2017, 18:15:15
от lexin
Шаблон Protostar - Валидация HTML 100%

Автор leo78

Ответов: 14
Просмотров: 7018
Последний ответ 24.11.2017, 15:30:17
от leo78
Стиль для вышестоящего блока - HTML, CSS

Автор lalalag

Ответов: 6
Просмотров: 2855
Последний ответ 26.06.2017, 15:07:35
от Shustry
Где найти HTML каждой страницы сайта

Автор Sirius02030

Ответов: 3
Просмотров: 8571
Последний ответ 08.11.2016, 20:43:22
от Sirius02030