SVG – Learning by Coding

[ geturl.svg --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="UTF-8"
  2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  3:   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  4:   <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
  5: ]>
  6: 
  7: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
  8: <!--    Author: Dr. Thomas Meinike 11/02 - thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="Init(evt)">
 12: 
 13: <title>ASV-Funktion getURL()</title>
 14: <desc>SVG-Datenbankzugriff mittels ASV-Funktion getURL() und PHP</desc>
 15: 
 16: <defs>
 17: <script type="text/javascript">
 18: <![CDATA[
 19: 
 20: var svgdoc;
 21: 
 22: function Init(load_evt)
 23: {
 24:   svgdoc=load_evt.target.ownerDocument;
 25: 
 26:   // Version des SVG Viewers ausgeben
 27:   if(window.getSVGViewerVersion)
 28:   {
 29:     var ver;
 30:     ver=getSVGViewerVersion();
 31:     svgdoc.getElementById("version").firstChild.nodeValue+=ver;
 32:   }
 33: }
 34: 
 35: function TextHover(obj,color,decor)
 36: {
 37:   obj.target.style.setProperty("fill",color,"");
 38:   obj.target.style.setProperty("text-decoration",decor,"");
 39: }
 40: 
 41: function HoleDaten(suchtext)
 42: {
 43:   if(window.getURL)getURL("geturl.php?eingabe="+suchtext,callback);
 44:   else alert("Diese Technik ist nicht verfuegbar!");
 45: }
 46: 
 47: function callback(urlRequestStatus)
 48: {
 49:   /* 
 50:     Rueckgabewerte des Objektes urlRequestStatus:
 51:     - urlRequestStatus.success;
 52:     - urlRequestStatus.contentType;
 53:     - urlRequestStatus.content;
 54:   */
 55: 
 56:   var ausgabe;
 57: 
 58:   if(urlRequestStatus.success)
 59:   {
 60:     ausgabe=urlRequestStatus.content.split("|");
 61: 
 62:     svgdoc.getElementById("ausgabe0").childNodes.item(0).nodeValue=ausgabe[0];
 63:     svgdoc.getElementById("ausgabe1").childNodes.item(0).nodeValue=ausgabe[1];
 64:     svgdoc.getElementById("url").setAttribute("xlink:href",ausgabe[1]);
 65: 
 66:     if(ausgabe[2])
 67:     {
 68:       svgdoc.getElementById("bild").setAttribute("xlink:href","bilder/"+ausgabe[2].toLowerCase()+".jpg");
 69:     }
 70:     else
 71:     {
 72:       svgdoc.getElementById("bild").setAttribute("xlink:href","");
 73:     }
 74:   }
 75: }
 76: 
 77: ]]>
 78: </script>
 79: </defs>
 80: 
 81: <text x="30" y="30" style="fill: #000; font-size: 24px">SVG-Datenbankzugriff mittels ASV-Funktion getURL() und PHP</text>
 82: <text x="30" y="60" style="fill: #00C; font-size: 14px">Magazine vom Software &amp; Support-Verlag:</text>
 83: 
 84: <!-- Links mit Funktionsaufruf von HoleDaten('suchtext') -->
 85: <a xlink:href="" cursor="pointer" onclick="return false"><text x="30" y="80" style="fill: #00C" onclick="HoleDaten('entwickler')" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Der Entwickler</text></a>
 86: <a xlink:href="" cursor="pointer" onclick="return false"><text x="30" y="100" style="fill: #00C" onclick="HoleDaten('dotnet')" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">dot.net Magazin</text></a>
 87: <a xlink:href="" cursor="pointer" onclick="return false"><text x="30" y="120" style="fill: #00C" onclick="HoleDaten('javamag')" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Java Magazin</text></a>
 88: <a xlink:href="" cursor="pointer" onclick="return false"><text x="30" y="140" style="fill: #00C" onclick="HoleDaten('linuxent')" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Linux Enterprise</text></a>
 89: <a xlink:href="" cursor="pointer" onclick="return false"><text x="30" y="160" style="fill: #00C" onclick="HoleDaten('phpmag')" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">PHP Magazin</text></a>
 90: <a xlink:href="" cursor="pointer" onclick="return false"><text x="30" y="180" style="fill: #00C" onclick="HoleDaten('xmlmag')" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">XML &amp; Web Services Magazin</text></a>
 91: <a xlink:href="" cursor="pointer" onclick="return false"><text x="30" y="200" style="fill: #00C" onclick="HoleDaten('NoName')" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">[NoName]</text></a>
 92: 
 93: <line x1="30" y1="220" x2="730" y2="220" style="stroke: #CCC; stroke-width: 1px"/>
 94: 
 95: <!-- statische Texte -->
 96: <text x="30" y="250" style="fill: #090; font-size: 18px">Thema: </text>
 97: <text x="30" y="280" style="fill: #090; font-size: 18px">Website: </text>
 98: 
 99: <!-- dynamische Texte -->
100: <text id="ausgabe0" x="125" y="250" style="fill: #F00; font-size: 18px"> </text>
101: <a id="url" xlink:href="" target="magsite"><text id="ausgabe1" x="125" y="280" style="fill: #F00; font-size: 18px" onmouseover="TextHover(evt,'#00C','underline')" onmouseout="TextHover(evt,'#F00','none')"> </text></a>
102: 
103: <line x1="30" y1="300" x2="730" y2="300" style="stroke: #CCC; stroke-width: 1px"/>
104: 
105: <text x="30" y="330" style="fill: #000; font-size: 14px">Ein PHP-Script holt die Daten aus einer MySQL-DB und &#252;bergibt diese via JavaScript an das SVG-Dokument.</text>
106: 
107: <!-- dynamisches Bild -->
108: <image id="bild" x="630" y="160" xlink:href="" width="99" height="140"/>
109: 
110: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/"><text  x="565" y="360" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#000','none')">&#169; by Dr. Thomas Meinike 2002</text></a>
111: 
112: <text id="version" x="30" y="360">SVGViewerVersion: </text>
113: 
114: </svg>

[zum Anfang]