gototopgototop
Register
Вход
HomeКак это сделать?... /  Увеличение картинки при наведении курсора
Увеличение картинки при наведении курсора E-mail
Повышаем мастерство - Как сделать?...

Увеличение картинки при подведении к ней курсораВопрос: "Как сделать так, чтобы при подведении курсора к картинке она увеличивалась бы?"

Ответ: подобный эффект достигается с помощью визуального редактора. Я использую редактор JCE, в нём и будем сейчас работать.

Шаг 1. Готовим две картинки - большую и маленькую. Для примера я выбрала размеры 100х96 рх (S_singer.jpg)  и 500х478 рх (singer.jpg).

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

Joomlalessons.ru- Уроки Joomla :: Увеличение картинки при наведении курсора

Рис.1

На Рис.1 показаны три картинки, которые я положила в папочку, созданную для этого урока.
Большая называется singer.jpg, маленькая - S_singer.jpg. Я всегда использую такую систему при названии картинок: если картинка является уменьшенной копией, то ставлю S_  перед названием. И никогда не путаюсь! Попробуйте, думаю, вы оцЕните эти удобства при работе с множеством имиджей на сайте.
Третья картинка - точная копия S_singer.jpg, только названа по-русски: "Солист.jpg". Убедились, что редактор ругается на русскоязычное слово? Так что привыкайте к латинским буковкам, если хотите, не напрягаясь, украшать сайт картинками, аудио и видеофайлами!

Шаг 2. Создаем статью в визуальном редакторе. В нужном нам месте статьи вставляем МАЛЕНЬКОЕ изображение.

altО том, как правильно вставить картинку в статью, подробно расписано в уроке "Создание и администрирование статей".


Заметьте, сейчас вокруг вставленного в статью изображения нет никакой рамки, а значок редактора, открывающий параметры настройки картинки, пока не "включен" :
  Рис.2Увеличение картинки при наведении курсора

Шаг 3. Нажмём на изображение один разок мышкой. Вокруг него образуется контур, и одновременно с этим изменится вид соответствующего значка редактора:

Рис.3Увеличение картинки при наведении курсора


Шаг 4. Нажмём на значок для открытия параметров настройки картинки. Они сейчас выглядят так:

Joomlalessons.ru- Уроки Joomla :: Увеличение картинки при наведении курсора

Рис. 4

На Рис. 4 мы видим, что пока в параметрах автоматически прописался только путь к картинке ( у меня он такой: images/demo/redaktor/S_singer.jpg). Всё остальное надо прописывать вручную:

1)  строка alternate text : в целях поисковой оптимизации прописываем название картинки, например, "Поющий кот" ;
2)  в строке Dimensions прописываем размеры картинки;
3)  в строке Выравнивание прописываем положение картинки относительно текста. Я выбрала из выпадающего списка Left ;
4)  в строке Margin прописываем отступы картинки с четырёх сторон. По умолчанию, они будут одинаковыми, достаточно вписать в первой клетке какое-либо значение. Я обычно ставлю "10". Однако, если требуется сделать отступы разными с каждой стороны, то сначала снимаем галочку с Equal Values, а потом в каждом квадрате прописываем нужное значение;
5) в строке Граница можно установить рамку для картинки: ширину, стиль, цвет. Поэкспериментируйте и найдите подходящий вам вариант.

После того, как вы заполните параметры, обратите внимание, что справа есть окно просмотра того, как будет выглядеть (примерно) картинка в окружении текста.

Joomlalessons.ru- Уроки Joomla :: Увеличение картинки при наведении курсора
Рис. 5

Если вам всё нравится, то можно прокрутить окно с настройками вниз и нажать на кнопку Update. НО!! -  это сообщение я даю только для сведений по работе с картинками вообще. Сейчас же мы только смотрим, как выглядит кнопка, однако НЕ ЖМЁМ на неё:


Рис. 6

Шаг 5. Переходим к главной задаче сегодняшнего урока: сделать так, чтобы картинка увеличивалась при подведении к ней курсора. Для этого:

1)  копируем всё, что есть в строке URL
2)  сразу после этого нажимаем на кнопку Rollover:
Увеличение картинки при подведении курсора
Рис.7

Шаг 6. В окошке Rolloverа  в строки  Mouseover  и Mouseout вставляем скопированный  в предыдущем шаге путь к картинке. Вот так:
Увеличение картинки при подведении курсора

Рис. 8

Шаг 7. "Mouseover"  как раз и означает картинку, которая будет показана при подведении к ней курсора. Поэтому в её строчке должен быть прописан путь к увеличенной копии картинки, т.е. к singer.jpg. Значит, стираем в названии ненужные здесь "S_" :
Рис. 9Увеличение картинки при подведении к ней курсора


Шаг 8. А вот теперь нажимаем на Update. Дописываем статью, сохраняем её и бежим в лицевую панель полюбоваться плодами рук своих.

Мы с вами сегодня имели  целью научиться показывать в статье увеличенную копию маленькой картинки  при подведении к ней курсора. Но имейте в виду, что таким же способом вы можете показать любую другую картинку, не обязательно увеличенную копию. К примеру, если бы мне вздумалось пошутить и показать, что котярка поёт о зеленоглазой подружке-добытчице, которая приготовила ужин и поджидает возвращения любимого с вокальной разминки, то я бы попробовала сделать это вот так (подведите курсор) :


Увеличение картинки при подведении курсора


Читайте также:
Ещё статьи:

 
ВХОД на сайт



Базовый курс создания сайта

 

Есть ли народ на сайте?

Сейчас 24 гостей онлайн

Мы вконтакте

Как сделать?...

Контакты





Copyright © 2011. Joomla! для "чайников". Автор сайта Наталья Мельниченко
Follow us on Twitter