Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Подсветить выбранный дом на карте (https://javascript.ru/forum/events/9789-podsvetit-vybrannyjj-dom-na-karte.html)

Sallity 05.06.2010 22:30

Подсветить выбранный дом на карте
 
Использую 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 без наведения мышки?

exec 06.06.2010 06:34

Cookies.

Sallity 06.06.2010 12:19

И что я могу подцепить из этой ссылки? при чем здесь cookies?

Sallity 06.06.2010 18:26

Ну помогите пожалуйста как вывести эту подсветку....Неужели никто не знает????Данный код почемуто не работает
<script type="text/javascript">drawPoly("canvasId");</script>

JsLoveR 07.06.2010 00:15

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

Sallity 07.06.2010 00:21

<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 13:48

спасибо за советы :) нашел решение, кому интересно пишите...

JsLoveR 07.06.2010 18:13

Sallity,
интересно честно говоря)


Часовой пояс GMT +3, время: 08:17.