Вход

Просмотр полной версии : jQuery (Как открыть объект в этом же окне, щёлкнув по нему мышкой) Объект кусок карты


hadzhimuratov
08.06.2012, 17:57
При клике по разным кускам карты выскакивает сообщение с названием этого региона, в дальнейшем называю его объект.
Вопрос: Как сделать так что бы при клике выскакивало не название объекта, а открывалась новая страница в этом же окне.

Объект имеет два параметра path - кусок карты и name название региона.
Как привязать ссылку на новую страницу к куску карты, что бы при нажатии на этот кусок открывалась новая страница.

Очень благодарен Вашему форуму, много полезной информации нашел. Заранее благодарю за помощь; )

Amphiluke
08.06.2012, 18:31
Обычно такое реализуется при помощи карты изображения (<map>). Ссылки с отдельных частей карты реализуются тегами <area />, для которых можно указать атрибут href — адрес перехода при клике. Для этого вообще не нужен JavaScript.

Раед
08.06.2012, 18:35
<a href="" target="_blank">link</a>

hadzhimuratov
08.06.2012, 18:36
без скрипта визуально не красиво получается, а вот с Рафаэлем все очень даже симпатично, только вот теперь не знаю, как событие при клике описать.

hadzhimuratov
08.06.2012, 18:37
без скрипта визуально не красиво получается, а вот с Рафаэлем все очень даже симпатично, только вот теперь не знаю, как событие при клике описать, что бы открывалась при нажатии на регион...
for (var country in paths) {

var obj = r.path(paths[country].path);

obj.attr(attributes);

arr[obj.id] = country;

obj
.hover(function(){
this.animate({
fill: '#896644'
}, 300);
}, function(){
this.animate({
fill: attributes.fill
}, 300);
})
.click(function(){
document.location.hash = arr[this.id];

var point = this.getBBox(0);

$('#map').next('.point').remove();

$('#map').after($('<div />').addClass('point'));

$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
.prepend($('').attr('src', 'yandex.ru/flags/'+arr[this.id]+'.png'))
/*КОММЕНТАРИЙ <img /> ФЛАЖОК*/
.css({
left: point.x+(point.width/2)-80,
top: point.y+(point.height/2)-20
})
.fadeIn();

});

$('.point').find('.close').live('click', function(){
var t = $(this),
parent = t.parent('.point');

parent.fadeOut(function(){
parent.remove();
});
return false;
});




}

Amphiluke
08.06.2012, 18:40
без скрипта визуально не красиво получается
А вам нужны переходы на другую страницу с какими-то визуальными эффектами? :-?

hadzhimuratov
08.06.2012, 18:43
нет, просто сама по себе страница открывается.
Пока я только сделал так, что при нажатии на кусок карты появляется инфа в окошке про этот регион, в виде ссылки, нажимаю на ссылку и открывается в том же окне страница с полной инфой, а вот как сделать так что бы страница открывалась сама по себе без ссылки не знаю(((

Раед, таргет топ подходит мне больше, таргет бланк в новом окне открывает)

Deff
08.06.2012, 18:47
hadzhimuratov,
В принципе, вы можете прописать событие в area, передавая ему функцию
<area shape="rect" coords="202,277,308,308"
href="#" onclick="MapVisible(this)"/>

Как то реализовывал достататочно простенькое подсвечивание, при наведении,
Под картой картинки идентичного размера с карту, с подсвеченной областью(остальное прозрачка),c position: absolute, всплывающие z-index(om) при наведении курсором(это всё делалось через css)
Сама мап -карта располагается на прозрачке Выше всех картинок,
картинка мап-карты - отделена и лежит 2-3 cлоем. 2-м без наведения курсора

Amphiluke
08.06.2012, 18:50
@hadzhimuratov
Судя по вашему куску кода, карта как раз реализована при помощи <map>. Что если вообще убрать обработчик события "click"?
.click(function(){
Или, по крайней мере, прописать в нем что-нибудь типа
location.href = this.href;
На какой объект вообще ссылается this внутри этого обработчика? Не <area/> ли?

UPD.
Не <area/> ли?
Походу, нет.
var point = this.getBBox(0);

hadzhimuratov
08.06.2012, 18:50
Ну это понятно, но хочеться все таки реализовать идею, а неперестраивать карту(

Просто нужно дать индетификатор ссылке а потом указать что при нажатии на кусок карты выводиться эта страница. Не могу понять как((
Вот хоть убейте.

hadzhimuratov
08.06.2012, 18:52
Amphiluke,
могу скинуть файлы, посмотришь?)

Deff
08.06.2012, 18:52
Просто нужно дать индетификатор ссылке а потом указать что при нажатии на кусок карты выводиться эта страница. Не могу понять как((
Просто при клике передайте href во всплывающий кусок(обрамите его в
<a href="...">Тут кусок Карты</a>
на самой карте onclick="return false"

hadzhimuratov
08.06.2012, 18:57
Ну я так и сделал, но вот нужно что бы при нажатии по куску открывалось. Помогите пожалуйста, могу файлы скинуть для лучшего понимания, а тоя может описать не могу проблему(

hadzhimuratov
08.06.2012, 19:12
Amphiluke,

location.href = this.href; )))))))))))))))))))))) УРА!!!
срабатывает, но как теперь присвоить каждому куску индетификатор и привязать каждому свою страницу?

Deff
08.06.2012, 19:17
hadzhimuratov,
Попробуйте передать через alt

<img src="http://javascript.ru/forum/images/smilies/help.gif" alt="http://javascript.ru/search.php?search_id=1911849434" onclick="location.href = this.alt"/>

hadzhimuratov
08.06.2012, 19:22
Deff,
а куда это вписывать????

Amphiluke
08.06.2012, 19:22
но как теперь присвоить каждому куску индетификатор и привязать каждому свою страницу?
Зависит от того, что такое «куски», т.е. чем они реализуются. Если это <area/>, то просто в каждой <area/> прописать href. Если что-то другое, то, соответственно, по-другому.

Deff
08.06.2012, 19:27
hadzhimuratov,
так понял, что по наведению на область карты - всплывает картинка области:
Вот данную картинку оформляем так, по клику переходим на нужную страницу

hadzhimuratov
08.06.2012, 19:46
Deff,
по клику скрипт обращается к другому скрипту в котором указан индетификатор name - имя региона, который скрипт всавляет в окно всплывающее.

hadzhimuratov
13.06.2012, 10:39
Товарищи форумчане, помогите пожалуйста, решить мне этот вопрос.

Deff
13.06.2012, 13:14
hadzhimuratov,
Выложите ссылку на архив...

hadzhimuratov
13.06.2012, 14:43
Вот ссылка http://sendfile.su/613051

Deff
13.06.2012, 15:02
hadzhimuratov,
Ок, вечером гляну

hadzhimuratov
14.06.2012, 11:06
Deff, ничего не получается, не могу описать функцию открытия, найти в блоке нашел, а вот закодить не могу(((

Deff
14.06.2012, 11:09
hadzhimuratov,
Убейте меня если я помню подробности... так что отдельные фразы увы, мне мало что говорят, описывайте проблемы полностью, хотя имхо я ратую переписать скрипт
Всовывать его на страницу без фрейма

hadzhimuratov
14.06.2012, 15:36
Карта сделана из svg-файла, скрипт написан так, что куски динамичные и выделяются при наведении на них, а при нажатии выходит название этого куска, а нужно что бы новая страница открывалась,в этом же окне, вместо этой карты.
Т.е. у каждого куска своя страница с информацией об этом куске.
Я пробывал, но моих знаний не хватает, вот я и хочу разобраться.
Очень буду благодарен Deff, не только устно)

Deff
14.06.2012, 18:20
hadzhimuratov,
Вы поднимайте тему раз в сутки - не всегда есть время и желание углубляцо в чужие задачи, которые не на пять минут... выдастся окно я гляну - я же писал Вам, сделаем, но не быстро

hadzhimuratov
15.06.2012, 09:01
Кстати без iframe я смог догадаться, просто применил стиль не к фрейму, а к div, в итоге, отражается без iframe страничка, но IE всеравно не видит карту : (

надо себе оперативки добавить, а то слишком долго соображаю))

Deff,Жду с нетерпением, заранее спасибо огромнейшее :)

hadzhimuratov
18.06.2012, 10:42
Deff, я так и не могу решить задачу(((

Deff
18.06.2012, 12:28
hadzhimuratov,
Ща = возможно седни закончу свои задачи - примусь за Ваши...

hadzhimuratov
18.06.2012, 16:55
Deff,
Прописал в path каждому объекту свой url

B init прописал window.document.location.href = paths[arr[this.id]].url;

Открываются, я вот думаю над ИЕ и ещё над тем как в новом окне открыть этот url,потому что на данный момент он у меня открывает в этом же диве, а он уменьшенный(

Deff
18.06.2012, 17:17
Открываются, я вот думаю над ИЕ и ещё над тем как в новом окне открыть этот url,потому что на данный момент он у меня открывает в этом же диве, а он уменьшенный(
Хм - тут уже наверн кроссдомен-обмен с изъвратами
Лучше карту перисовать и всунуть на ту жа страницу
1. И плагины найти можно полно подобных реализаций
2. ...

hadzhimuratov
18.06.2012, 17:54
просто у меня со временем очень все плохо, времени ждать не осталось почти, вот я и извращаю формы(
Я бы хотел по хорошему, но не знаю как((