Envek · August 14, 2011 03:07
diff --git a/README b/README
 Demo page, shows interaction between HTML page and embedded SVG.

 Browsers with SVG support (incomplete list): IE 9+, Opera 8+, Firefox 1.5+, Chrome

 Due to 'same origin policy' in modern browsers, it's recommended to run web server. For example, run 'python -m SimpleHTTPServer' from this directory and visit http://localhost:8000/

 For converting SVG to PNG, I recommend to use "rsvg-convert" command from "librsvg2-bin" package. Run in console something like this: cat map.svg | rsvg-convert > map.png
diff --git a/map.html b/map.html
 <!DOCTYPE html>

 <html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Картография — proof of concept</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">

    #imapc {
      display: block;
      width: 50%;
      float: left;
      overflow: visible;
      margin: 0;
      padding: 0;
      border: 0;
    }
    
    #imap, #imap img {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #data {
      width: 50%;
      float: left;
    }
    
    table {
      border-collapse: collapse;
      border: 1px solid black;
      box-sizing: border-box;
    }
    
    td, th {
      border: 1px solid silver;
      padding: 0.2em 1em;
    }
    
    tr {
      background: white;
    }

    tr.red {
      background: #FFF0F0;
    }

    tr.gray {
      background: #CFCFCF;
    }
    
    tr:nth-child(even) {
      background: #F0F0F0;
    }

    tr:nth-child(even).red {
      background: #FFE6E6;
    }
    
    tr:nth-child(even).gray {
      background: #CCCCCC;
    }
                    
    tr.highlight, tr:hover, tr:nth-child(even):hover,
    tr.red.highlight, tr.gray.highlight {
      background: lightyellow;
    }
  </style>
    
  <script type="text/javascript">
    // Определим свои функции добавления/удаления класса, так как те, что в jQuery не работают для SVG
    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());
      });
    }

    // Логика взаимодействия карты и таблицы
    $(window).load(function () {
      // Получаем доступ к SVG DOM
      var svgobject = document.getElementById('imap'); 
      if ('contentDocument' in svgobject) {
        var svgdom = jQuery(svgobject.contentDocument);

        // Устанавливаем соответствующим фигурам на карте, соответствующие классы (по таблице)
        $("#data tr").each (function (index) {
          var id = $(this).attr("id").substring(1);
          var classes = $(this).attr("class");
          $("#map #r"+id, svgdom).myAddClass(classes);
        });

        // Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы.
        $("#data tr").hover(
          function () {
            var id = $(this).attr("id").substring(1);
            $("#map #r"+id, svgdom).myAddClass("highlight");
          }, 
          function () {
            var id = $(this).attr("id").substring(1);
            $("#map #r"+id, svgdom).myRemoveClass("highlight");
          }
        );
        
        // Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте
        $("#map polygon", svgdom).add($("#map circle", svgdom)).hover(
          function () {
            var id = $(this).attr("id").substring(1);
            $("#data #d"+id).addClass("highlight");
          }, 
          function () {
            var id = $(this).attr("id").substring(1);
            $("#data #d"+id).removeClass("highlight");
          }
        );
      }      
    });
  </script>
 </head>

 <body>

 <div id="imapc">
  <object data="map.svg" type="image/svg+xml" id="imap" width="600" height="500">
    <img src="map.png" alt="Неинтерактивная карта" width="600" height="500">
    <p>К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.</p>
  </object>

 <p><a href="map.png">Статичное изображение карты (для копирования и вставки в другие документы)</a></p>
 </div>

 <table id="data">
  <tr id="d2" class="red"><td>г. Зея</td></tr>
  <tr id="d4" class="red"><td>г. Тында</td></tr>
  <tr id="d6" class="red"><td>Зейский район</td></tr>
  <tr id="d1"><td>Архаринский район</td></tr>
  <tr id="d5"><td>Тындинский район</td></tr>
  <tr id="d7" class="gray"><td>Сковородинский район</td></tr>
  <tr id="d8" class="gray"><td>Селемджинский район</td></tr>
 </table>

 </body>
 </html>
diff --git a/map.png b/map.png
diff --git a/map.svg b/map.svg
	Demo page, shows interaction between HTML page and embedded SVG.

	Browsers with SVG support (incomplete list): IE 9+, Opera 8+, Firefox 1.5+, Chrome

	Due to 'same origin policy' in modern browsers, it's recommended to run web server. For example, run 'python -m SimpleHTTPServer' from this directory and visit http://localhost:8000/

	For converting SVG to PNG, I recommend to use "rsvg-convert" command from "librsvg2-bin" package. Run in console something like this: cat map.svg \| rsvg-convert > map.png
	<!DOCTYPE html>

	<html lang="ru">
	<head>
	<meta charset="utf-8">
	<title>Картография — proof of concept</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">

	#imapc {
	display: block;
	width: 50%;
	float: left;
	overflow: visible;
	margin: 0;
	padding: 0;
	border: 0;
	}

	#imap, #imap img {
	width: 100%;
	margin: 0;
	padding: 0;
	}

	#data {
	width: 50%;
	float: left;
	}

	table {
	border-collapse: collapse;
	border: 1px solid black;
	box-sizing: border-box;
	}

	td, th {
	border: 1px solid silver;
	padding: 0.2em 1em;
	}

	tr {
	background: white;
	}

	tr.red {
	background: #FFF0F0;
	}

	tr.gray {
	background: #CFCFCF;
	}

	tr:nth-child(even) {
	background: #F0F0F0;
	}

	tr:nth-child(even).red {
	background: #FFE6E6;
	}

	tr:nth-child(even).gray {
	background: #CCCCCC;
	}

	tr.highlight, tr:hover, tr:nth-child(even):hover,
	tr.red.highlight, tr.gray.highlight {
	background: lightyellow;
	}
	</style>

	<script type="text/javascript">
	// Определим свои функции добавления/удаления класса, так как те, что в jQuery не работают для SVG
	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());
	});
	}

	// Логика взаимодействия карты и таблицы
	$(window).load(function () {
	// Получаем доступ к SVG DOM
	var svgobject = document.getElementById('imap');
	if ('contentDocument' in svgobject) {
	var svgdom = jQuery(svgobject.contentDocument);

	// Устанавливаем соответствующим фигурам на карте, соответствующие классы (по таблице)
	$("#data tr").each (function (index) {
	var id = $(this).attr("id").substring(1);
	var classes = $(this).attr("class");
	$("#map #r"+id, svgdom).myAddClass(classes);
	});

	// Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы.
	$("#data tr").hover(
	function () {
	var id = $(this).attr("id").substring(1);
	$("#map #r"+id, svgdom).myAddClass("highlight");
	},
	function () {
	var id = $(this).attr("id").substring(1);
	$("#map #r"+id, svgdom).myRemoveClass("highlight");
	}
	);

	// Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте
	$("#map polygon", svgdom).add($("#map circle", svgdom)).hover(
	function () {
	var id = $(this).attr("id").substring(1);
	$("#data #d"+id).addClass("highlight");
	},
	function () {
	var id = $(this).attr("id").substring(1);
	$("#data #d"+id).removeClass("highlight");
	}
	);
	}
	});
	</script>
	</head>

	<body>

	<div id="imapc">
	<object data="map.svg" type="image/svg+xml" id="imap" width="600" height="500">
	<img src="map.png" alt="Неинтерактивная карта" width="600" height="500">
	<p>К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.</p>
	</object>

	<p><a href="map.png">Статичное изображение карты (для копирования и вставки в другие документы)</a></p>
	</div>

	<table id="data">
	<tr id="d2" class="red"><td>г. Зея</td></tr>
	<tr id="d4" class="red"><td>г. Тында</td></tr>
	<tr id="d6" class="red"><td>Зейский район</td></tr>
	<tr id="d1"><td>Архаринский район</td></tr>
	<tr id="d5"><td>Тындинский район</td></tr>
	<tr id="d7" class="gray"><td>Сковородинский район</td></tr>
	<tr id="d8" class="gray"><td>Селемджинский район</td></tr>
	</table>

	</body>
	</html>