Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2010, 22:30
Новичок на форуме
Отправить личное сообщение для Sallity Посмотреть профиль Найти все сообщения от Sallity
 
Регистрация: 12.05.2010
Сообщений: 6

Подсветить выбранный дом на карте
Использую canvas для подсветки областей на карте area
function drawPoly(id, arr) { 
  var canvas = document.getElementById(id).getContext('2d'); 
  // Начинаем отрисовку 
  canvas.beginPath(); 
  for (var i = 0; i < arr.length; i++) { 
    // Ставим точку на исходную позицию 
    if (i == 0) canvas.moveTo(arr[i][0], arr[i][1]); 
    // Рисуем линии от точки к точке 
    else canvas.lineTo(arr[i][0], arr[i][1]); 
  } 
  // Задаем цвет заливки в формате RGBA 
  canvas.fillStyle = "rgba(100,50,250,0.5)"; 
  // Зальем полученный многоугольник цветом 
canvas.fill(); 
} 

// Очищаем область Canvas 
function clearCanvas(id) { 
  var canvas = document.getElementById(id) 
  var width = parseInt(canvas.width); 
  var height = parseInt(canvas.height); 
  canvas = canvas.getContext('2d'); 
  canvas.clearRect(0, 0, width, height); 
}


function canvasBrowser() { 
  // Определяем тип браузера 
  var ua = navigator.userAgent.toLowerCase(); 
  var isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1 && ua.indexOf("webtv") == -1); 
  var isOpera = ua.indexOf("opera") != -1; 
  var isFF = ua.indexOf("firefox") != -1; 
   
  var result = false; 
  // Разрешим все версии IE 
  if (isIE) result = true; 
  // Лису разрешим только с полторашки 
  else if (isFF) { 
    var ffVersion = parseFloat(ua.substring(ua.indexOf("firefox") + 8, ua.length)); 
    if (ffVersion >= 1.5) result = true; 
  // Оперу, начиная с версии 9.0 
  } else if (isOpera) { 
    var operaVersion = parseFloat(ua.substring(ua.indexOf("opera") + 6, ua.length)); 
    if (operaVersion >= 9.0) result = true; 
  } 
  return result; 
} 

// Кеш координат 
var coordsCashe = []; 
// Прикручиваем события 
function initImageMap() { 
  if (!canvasBrowser()) return; 
  var map = document.getElementById("imageMapId"); 
  var area, i; 
  for (i = 0; i < map.childNodes.length; i++) { 
    area = map.childNodes[i]; 
    // Проверяем тип узла 
    if (area.nodeType != 1) continue; 
    // Проверяем, что узел является элементом area 
    if (area.nodeName.toLowerCase() != "area") continue; 
    // Добавляем ID c ключом массива координат 
    area.id = "id" + i; 
    // Добавляем к элементу обработчики событий 
    area.onmouseover= mouseOverHandler; 
    area.onmouseout = mouseOutHandler; 
    // Кешируем координаты 
    coordsCashe[i] = parseCoords(area.coords); 
  } 
} 

// Обработчик события mouseover 
function mouseOverHandler() { 
  // Вырезаем индекс для массива координат из ID 
  var i = this.id.substring(2, this.id.length); 
  // Рисуем многоугольник на полученной области 
  drawPoly( 
    "canvasId", 
    coordsCashe[i] 
  ); 
} 
// Обработчик события mouseout 
function mouseOutHandler() { 
  // Стираем нарисованное в canvas 
  clearCanvas("canvasId"); 
} 

// Парсим строку с координатами, перечисленными через запятую, в двумерный массив 
function parseCoords(str) { 
  var coords = []; 
  var buferArray = str.split(","); 
  var j = 0; 
  for (var i = 0; i < buferArray.length; i++) { 
    if (i % 2 == 0) { 
      coords[j] = []; 
      coords[j][0] = buferArray[i]; 
    } else { 
      coords[j][1] = buferArray[i]; 
      j++; 
    } 
  } 
  return coords; 
}

<script type="text/javascript">initImageMap();</script>

Как сделать чтобы при перезагрузке страницы автоматически подсвечивался area без наведения мышки?
Ответить с цитированием
  #2 (permalink)  
Старый 06.06.2010, 06:34
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Cookies.
Ответить с цитированием
  #3 (permalink)  
Старый 06.06.2010, 12:19
Новичок на форуме
Отправить личное сообщение для Sallity Посмотреть профиль Найти все сообщения от Sallity
 
Регистрация: 12.05.2010
Сообщений: 6

И что я могу подцепить из этой ссылки? при чем здесь cookies?
Ответить с цитированием
  #4 (permalink)  
Старый 06.06.2010, 18:26
Новичок на форуме
Отправить личное сообщение для Sallity Посмотреть профиль Найти все сообщения от Sallity
 
Регистрация: 12.05.2010
Сообщений: 6

Ну помогите пожалуйста как вывести эту подсветку....Неужели никто не знает????Данный код почемуто не работает
<script type="text/javascript">drawPoly("canvasId");</script>
Ответить с цитированием
  #5 (permalink)  
Старый 07.06.2010, 00:15
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

В скрипте есть обращения к элементам по id, есть ли элементы у Вас с id, к которым идёт обращение, а именно: "imageMapId" и тд. ?

Последний раз редактировалось JsLoveR, 07.06.2010 в 00:18.
Ответить с цитированием
  #6 (permalink)  
Старый 07.06.2010, 00:21
Новичок на форуме
Отправить личное сообщение для Sallity Посмотреть профиль Найти все сообщения от Sallity
 
Регистрация: 12.05.2010
Сообщений: 6

<img src="img/map1.gif" width="800px" height="476px" alt="" usemap="#map1">
<canvas id="canvasId" width="800px" height="476px"></canvas>
<img src="test.jpg">
<map id='imageMapId' name='map1'><area ....../></map> - координаты беру из базы данных

Последний раз редактировалось Sallity, 07.06.2010 в 00:23.
Ответить с цитированием
  #7 (permalink)  
Старый 07.06.2010, 13:48
Новичок на форуме
Отправить личное сообщение для Sallity Посмотреть профиль Найти все сообщения от Sallity
 
Регистрация: 12.05.2010
Сообщений: 6

спасибо за советы нашел решение, кому интересно пишите...
Ответить с цитированием
  #8 (permalink)  
Старый 07.06.2010, 18:13
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

Sallity,
интересно честно говоря)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Google map. Нарисовать на карте иконку. Flake Элементы интерфейса 1 21.11.2008 08:04