SVG und jQuery | Interaktive Grafiken erstellen mit Inkscape

Interaktive .svg mit jQuery

by erick

HTML

<h2>Einwohnerzahlen einiger Länder. <br /><small>Eine interaktive Weltkarte</small></h2>


<div class="tooltip-content" id="example-content-1">USA</div>
<div class="tooltip-content" id="example-content-2">Deutschland</div>
<div class="tooltip-content" id="example-content-3">Südkorea</div>
<div class="tooltip-content" id="example-content-4">Indien</div>
<div class="tooltip-content" id="example-content-5">Japan</div>



<div id="svg_container">

  <div class="info_box" id="info_usa"><h3>USA</h3> <strong>310.233.000</strong> <small>Einwohner</small><a href="javascript: void()" title="close" class="close"></a></div>
  <div class="info_box" id="info_deutschland"><h3>Deutschland</h3> <strong>82.283.000</strong> <small>Einwohner</small><a href="javascript: void()" title="close" class="close"></a></div>
  <div class="info_box" id="info_indien"><h3>Indien</h3> <strong>1.210.193.422</strong> <small>Einwohner</small><a href="javascript: void()" title="close" class="close"></a></div>
  <div class="info_box" id="info_southkorea"><h3>Südkorea</h3> <strong>48.636.000</strong> <small>Einwohner</small><a href="javascript: void()" title="close" class="close"></a></div>
  <div class="info_box" id="info_japan"><h3>Japan</h3> <strong>126.804.000</strong> <small>Einwohner</small><a href="javascript: void()" title="close" class="close"></a></div>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="730"
   height="390"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.2 r9819"
  ...

CSS

h2 { font: normal 30px/1 Georgia, Palatino, 'Palatino Linotype', serif; color: #333; }
   h2 span { font: 10px/1.5 Arial, sans-serif; color: #ee7000; text-transform: uppercase; display: block; }
   #example-content-1, #example-content-2, #example-content-3, #example-content-4, #example-content-5 { display: none; position: absolute; z-index: 100; padding: 3px 10px; border: 1px solid #ccc; background-color: #fff; background-color: rgba(255, 255, 255, 0.9); border-radius: 2px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); font: bold 10px/1.5 Arial, sans-serif;  }
   #svg_container { position: relative; width: 730px; height: 390px; overflow: hidden;}
   .info_box { position: absolute; left: 20px; bottom: 20px; padding: 5px 10px; border: 1px solid #ccc; background-color: #fff; background-color: rgba(255, 255, 255, 0.8); border-radius: 2px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); font: 12px/1.5 Arial, sans-serif; display: none;  }
   .info_box h3  { color: #000; border-bottom: 1px solid #ccc; padding: 0 0 2px 0; margin: 0 0 10px 0; }
   .close { background: url(http://www.freizeitler.de/examples/svg_interaktiv/closer.gif) no-repeat 0 0; width: 10px; height: 10px; display: block; position: absolute; right: 10px; top: 10px; }

JavaScript

// EZPZ Tooltip v1.0; Copyright (c) 2009 Mike Enriquez, http://theezpzway.com; Released under the MIT License
(function($){$.fn.ezpz_tooltip=function(options){var settings=$.extend({},$.fn.ezpz_tooltip.defaults,options);return this.each(function(){var content=$("#"+getContentId(this.id));var targetMousedOver=$(this).mouseover(function(){settings.beforeShow(content,$(this))}).mousemove(function(e){contentInfo=getElementDimensionsAndPosition(content);targetInfo=getElementDimensionsAndPosition($(this));contentInfo=$.fn.ezpz_tooltip.positions[settings.contentPosition](contentInfo,e.pageX,e.pageY,settings.offset,targetInfo);contentInfo=keepInWindow(contentInfo);content.css('top',contentInfo['top']);content.css('left',contentInfo['left']);settings.showContent(content)});if(settings.stayOnContent&&this.id!=""){$("#"+this.id+", #"+getContentId(this.id)).mouseover(function(){content.css('display','block')}).mouseout(function(){content.css('display','none');settings.afterHide()})}else{targetMousedOver.mouseout(function(){settings.hideContent(content);settings.afterHide()})}});function getContentId(targetId){if(settings.contentId==""){var name=targetId.split('-')[0];var id=targetId.split('-')[2];return name+'-content-'+id}else{return settings.contentId}};function getElementDimensionsAndPosition(element){var height=element.outerHeight(true);var width=element.outerWidth(true);var top=$(element).offset().top;var left=$(element).offset().left;var info=new Array();info['height']=height;info['width']=width;info['top']=top;info['left']=left;return info};function keepInWindow(contentInfo){var windowWidth=$(window).width();var windowTop=$(window).scrollTop();var output=new Array();output=contentInfo;if(contentInfo['top']<windowTop){output['top']=windowTop}if((contentInfo['left']+contentInfo['width'])>windowWidth){output['left']=windowWidth-contentInfo['width']}if(contentInfo['left']<0){output['left']=0}return...