Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.06.2012, 17:57
Аспирант
Отправить личное сообщение для hadzhimuratov Посмотреть профиль Найти все сообщения от hadzhimuratov
 
Регистрация: 30.05.2012
Сообщений: 37

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

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

Очень благодарен Вашему форуму, много полезной информации нашел. Заранее благодарю за помощь; )
Ответить с цитированием
  #2 (permalink)  
Старый 08.06.2012, 18:31
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Обычно такое реализуется при помощи карты изображения (<map>). Ссылки с отдельных частей карты реализуются тегами <area />, для которых можно указать атрибут href — адрес перехода при клике. Для этого вообще не нужен JavaScript.
Ответить с цитированием
  #3 (permalink)  
Старый 08.06.2012, 18:35
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

<a href="" target="_blank">link</a>
Ответить с цитированием
  #4 (permalink)  
Старый 08.06.2012, 18:36
Аспирант
Отправить личное сообщение для hadzhimuratov Посмотреть профиль Найти все сообщения от hadzhimuratov
 
Регистрация: 30.05.2012
Сообщений: 37

без скрипта визуально не красиво получается, а вот с Рафаэлем все очень даже симпатично, только вот теперь не знаю, как событие при клике описать.
Ответить с цитированием
  #5 (permalink)  
Старый 08.06.2012, 18:37
Аспирант
Отправить личное сообщение для hadzhimuratov Посмотреть профиль Найти все сообщения от hadzhimuratov
 
Регистрация: 30.05.2012
Сообщений: 37

Сообщение от hadzhimuratov Посмотреть сообщение
без скрипта визуально не красиво получается, а вот с Рафаэлем все очень даже симпатично, только вот теперь не знаю, как событие при клике описать, что бы открывалась при нажатии на регион...
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;
		});
		
		
		 
		
	}
Ответить с цитированием
  #6 (permalink)  
Старый 08.06.2012, 18:40
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Сообщение от hadzhimuratov
без скрипта визуально не красиво получается
А вам нужны переходы на другую страницу с какими-то визуальными эффектами?
Ответить с цитированием
  #7 (permalink)  
Старый 08.06.2012, 18:43
Аспирант
Отправить личное сообщение для hadzhimuratov Посмотреть профиль Найти все сообщения от hadzhimuratov
 
Регистрация: 30.05.2012
Сообщений: 37

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

Раед, таргет топ подходит мне больше, таргет бланк в новом окне открывает)
Ответить с цитированием
  #8 (permalink)  
Старый 08.06.2012, 18:47
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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-м без наведения курсора

Последний раз редактировалось Deff, 08.06.2012 в 18:49.
Ответить с цитированием
  #9 (permalink)  
Старый 08.06.2012, 18:50
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

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

На какой объект вообще ссылается this внутри этого обработчика? Не <area/> ли?

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

Последний раз редактировалось Amphiluke, 08.06.2012 в 18:53.
Ответить с цитированием
  #10 (permalink)  
Старый 08.06.2012, 18:50
Аспирант
Отправить личное сообщение для hadzhimuratov Посмотреть профиль Найти все сообщения от hadzhimuratov
 
Регистрация: 30.05.2012
Сообщений: 37

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

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск