Исследователь
Профиль
Группа: Участник
Сообщений: 554
Регистрация: 31.7.2007
Где: Россия, Омск
Репутация: нет
Всего: 9
|
Всем привет. Знакомые попросили для проводимого конкурса эссе сделать интерактивную карту Росии, при наведении мыши на регион он должен изменять цвет и подсчитывать количество работ, присланных жителями этого региона. Так как с яваскриптом не работал уже очень давно, решил использовать готовые решения в виде svg, библиотек jquery и сluetip. Подсмотрел похожее решение в статье на хабре. В результате набросал следующий код прототипа: | Код |
jQuery.fn.myAddClass = function (classTitle) {
return this.each(function() {
var oldClass = jQuery(this).attr("class");
oldClass = oldClass ? oldClass : '';
jQuery(this).attr("class", (oldClass+" "+classTitle).trim());
});
}
jQuery.fn.myRemoveClass = function (classTitle) {
return this.each(function() {
var oldClass = jQuery(this).attr("class");
var startpos = oldClass.indexOf(classTitle);
var endpos = startpos + classTitle.length;
var newClass = oldClass.substring(0, startpos).trim() + " " + oldClass.substring(endpos).trim();
if (!newClass.trim())
jQuery(this).removeAttr("class");
else
jQuery(this).attr("class", newClass.trim());
});
}
function occur(str, pattern) {
var pos = str.indexOf(pattern);
for (var count = 0; pos != -1; count++)
pos = str.indexOf(pattern, pos + pattern.length);
return count;
}
function getTitleById(id,type)
{
var addition = "";
switch(type)
{
case 1: addition = " область"; break;
case 2: addition = " край"; break;
case 3: addition = " автономный округ"; break;
case 4: addition = " республика"; break;
case 5: addition = ""; break;
case 6: addition = " автономная область"; break;
default: addition = " область"; break;
}
var regions = {"OMS":"Омская",
"MUR":"Мурманская",
"KR":"Карелия",
"LEN":"Ленинградская",
"PSK":"Псковская",
"KGD":"Калининградская",
"NGR":"Новгородская",
"TVE":"Тверская",
"SMO":"Смоленская",
"BRY":"Брянская",
"KLU":"Калужская",
"MOS":"Московская",
"MOW":"Москва",
"TUL":"Тульская",
"ORL":"Орловская",
"KRS":"Курская",
"BEL":"Белгородская",
"LIP":"Липецкая",
"VOR":"Воронежская",
"ROS":"Ростовская",
"KDA":"Краснодарский",
"AD":"Адыгея",
"KC":"Карачаево-Черкесская",
"KB":"Кабардино-Балкарская",
"SE":"Северная Осетия-Алания",
"IN":"Ингушетия",
"CE":"Чеченская",
"DA":"Дагестан",
"STA":"Ставропольский",
"KL":"Калмыкия",
"AST":"Астраханская",
"VGG":"Волгоградская",
"SAR":"Саратовская",
"TAM":"Тамбовская",
"RYA":"Рязанская",
"VLA":"Владимирская",
"YAR":"Ярославская",
"VLG":"Вологодская",
"ARK":"Архангельская",
"NEN":"Ненецкий",
"KO":"Коми",
"KIR":"Кировская",
"KOS":"Костромская",
"IVA":"Ивановская",
"NIZ":"Нижегородская",
"MO":"Мордовия",
"PNZ":"Пензенская",
"ULY":"Ульяновская",
"SAM":"Самарская",
"TA":"Татарстан",
"BA":"Башкортостан",
"ORE":"Оренбуржская",
"PER":"Пермский",
"UD":"Удмуртия",
"CHE":"Челябинская",
"ME":"Марий Эл",
"CU":"Чувашская",
"YAN":"Ямало-Ненецкий",
"KHM":"Ханты-Мансийский",
"SVE":"Свердловская",
"KGN":"Курганская",
"TY":"Тыва",
"TOM":"Томская",
"NVS":"Новосибирская",
"ALT":"Алтайский",
"KYA":"Красноярский",
"SA":"Саха(Якутия)",
"CHU":"Чукотский",
"KAM":"Камчатский",
"MAG":"Магаданская",
"KHA":"Хабаровский",
"PRI":"Приморский",
"SAK":"Сахалинская",
"YEV":"Еврейская",
"AMU":"Амурская",
"ZAB":"Забайкальский",
"BU":"Бурятия",
"IRK":"Иркутская",
"KEM":"Кемеровская",
"KK":"Хакасия",
"AL":"Алтай",
"TYU":"Тюменская"
};
var name = (id in regions) ? regions[id] : id;
var count = occur($("#works").html(), name);
return name + addition +": " + count + " работ";
}
jQuery(window).load(function () {
var svgobject = document.getElementById('imap');
if ('contentDocument' in svgobject)
{
var svgdom = svgobject.contentDocument;
$(svgdom.getElementsByClassName("oblast")).hover(
function () {
var htmlcontent = $("#testcontent").html();
var id = $(this).attr("id");
//alert(id);
$(this).css('fill','red');
$(this).attr({title:getTitleById(id,1)});
$(this).cluetip();
},
function () {
$(this).css('fill','#d6a477');
$(this).removeAttr("title");
//$(this).removeAttr("rel");
}
);
$(svgdom.getElementsByClassName("krai")).hover(
function () {
var htmlcontent = $("#testcontent").html();
var id = $(this).attr("id");
//alert(id);
$(this).css('fill','red');
$(this).attr({title:getTitleById(id,2)});
$(this).cluetip();
},
function () {
$(this).css('fill','#d6a477');
$(this).removeAttr("title");
//$(this).removeAttr("rel");
}
);
$(svgdom.getElementsByClassName("republic")).hover(
function () {
var htmlcontent = $("#testcontent").html();
var id = $(this).attr("id");
//alert(id);
$(this).css('fill','red');
$(this).attr({title:getTitleById(id,4)});
$(this).cluetip();
},
function () {
$(this).css('fill','#d6a477');
$(this).removeAttr("title");
//$(this).removeAttr("rel");
}
);
$(svgdom.getElementsByClassName("federal")).hover(
function () {
var htmlcontent = $("#testcontent").html();
var id = $(this).attr("id");
//alert(id);
$(this).css('fill','red');
$(this).attr({title:getTitleById(id,5)});
$(this).cluetip();
},
function () {
$(this).css('fill','#d6a477');
$(this).removeAttr("title");
//$(this).removeAttr("rel");
}
);
$(svgdom.getElementsByClassName("autoOblast")).hover(
function () {
var htmlcontent = $("#testcontent").html();
var id = $(this).attr("id");
//alert(id);
$(this).css('fill','red');
$(this).attr({title:getTitleById(id,6)});
$(this).cluetip();
},
function () {
$(this).css('fill','#d6a477');
$(this).removeAttr("title");
//$(this).removeAttr("rel");
}
);
$(svgdom.getElementsByClassName("autoOkrug")).hover(
function () {
var htmlcontent = $("#testcontent").html();
var id = $(this).attr("id");
//alert(id);
$(this).css('fill','red');
$(this).attr({title:getTitleById(id,3)});
$(this).cluetip();
},
function () {
$(this).css('fill','#d6a477');
$(this).removeAttr("title");
//$(this).removeAttr("rel");
}
);
}
});
|
Подключаю скрипты как обычно: | Код |
<script src="./js/jquery-1.8.1.min.js"></script>
<script src="./js/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="./js/cluetip.js"></script>
<script src="./js/russian_map.js"></script>
|
Последний содержит непосредственно код. В качестве донора я взял свободный шаблон Sea Shells, в который и встроил карту. Все это - в прикрепленном архиве. В firefox код работает без ошибок, но в хроме отрабатывает все до строчек | Код |
$(this).attr({title:getTitleById(id,6)});
$(this).cluetip();
|
Отладчик хрома показывает, что функция возвращает правильный результат, но clurtip на срабатывает. Подскажите решение проблемы, пожалуйста.
Присоединённый файл ( Кол-во скачиваний: 0 )
innovatika.zip 280,25 Kb--------------------
"Звонким вереском скроются наши следы, и не вспомнят о них. Кто поверит нам, рыцарям павшей звезды из отвергнутых книг? Пусть в узоре времен ни стихов. ни имен, но напомнит забывшим их полуночный крик." Тэм Гринхилл
"Ужели суслик твоего коварства нагадит в плов доверья моего?". Л.Филатов |
Ошибка cluetip в chrome 
Загрузка ...
