Оцените статью: 5 1 1 1 1 1 Рейтинг 5.00 (2 Оценки)

Привет!

В данной статье мы продолжим создание карты изображения. А именно сделаем её активной, чтобы область при наводе курсором выделялась.

Выделение секторов карты изображения

Для этого, нам понадобится подключить библиотеку Ajax и плагин Maphilight к Joomla-сайту.

Начнем с того, что создадим модуль html: Менеджер модулей - Создать - html.

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

Теперь подключим Ajax. Для этого в файле index.php Вашего шаблона, между тегами <head> </head>, вставляем данный код -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

Следующим шагом будет подключение maphilight, для этого данный файл нужно скачать и поместить в какую-нибудь папку Вашего сайта.

https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.min.js

После скачивания и размещения файла на сайте, опять идем в index.php Вашего шаблона и после строчки подключения Ajax, подключаем Maphilight и задаем ему параметры.

Подключение выглядит так:

<script type="text/javascript" src="/ /папка/jquery.maphilight.min.js"></script>

Параметры (функция) выглядит так:

<script type="text/javascript">

jQuery.noConflict();

jQuery(function() {
jQuery('.map').maphilight();
});</script>

Вот как должны размещаться подключения в целом:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/ /папка/jquery.maphilight.min.js"></script>
<script type="text/javascript"> 

jQuery.noConflict();

jQuery(function() {
jQuery('.map').maphilight();
});</script>

создание карты изображения joomla

jQuery.noConflict();  - это для избежания конфликта MooTools и Jquery.

jQuery('.map').maphilight(); - здесь .mapэто класс нашей карты, если неправильно его указать, что ничего не будет работать.

На этом все. Вот мануал http://davidlynch.org/projects/maphilight/docs/ и демо http://davidlynch.org/projects/maphilight/docs/demo_simple.html

Вопросы в комментарии.

Консультации по joomla - vk.com/kammiell


Похожие статьи

Интересные статьи

Самые читаемые статьи



Рекомендуем хостинг

BeGet

 30 дней бесплатно!

Домены на .ru в подарок