SVG – Learning by Coding
1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
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 09/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11:
12: <title>SVG - Learning by Coding</title>
13: <desc>SVG-Spezifikation in Beispielen</desc>
14:
15: <defs>
16:
17: <style type="text/css">
18: <![CDATA[
19:
20: *
21: {
22: font-family: sans-serif;
23: font-size: 12px;
24: }
25:
26: rect
27: {
28: stroke: #000;
29: stroke-width: 1.5px;
30: fill: none;
31: }
32:
33: text
34: {
35: pointer-events: none;
36: }
37:
38: /* Nichtmetalle */
39: .nm
40: {
41: fill: #FCC;
42: }
43:
44: /* Halbmetalle */
45: .hm
46: {
47: fill: #3C3;
48: }
49:
50: /* Hauptgruppen-Metalle */
51: .mh
52: {
53: fill: #0CF;
54: }
55:
56: /* Nebengruppen-Metalle */
57: .mn
58: {
59: fill: #9FF;
60: }
61:
62: .daten1 text
63: {
64: fill: #00C;
65: }
66:
67: .daten2 text
68: {
69: fill: #F00;
70: }
71:
72: .fbox
73: {
74: stroke: #000;
75: stroke-width: 0.8px;
76: }
77:
78: .aktelem
79: {
80: fill: #FF0;
81: }
82:
83: line.la
84: {
85: stroke: #F00;
86: stroke-width: 1.5px;
87: }
88:
89: line.ac
90: {
91: stroke: #00C;
92: stroke-width: 1.5px;
93: }
94:
95: ]]>
96: </style>
97:
98: <script type="text/javascript">
99: <![CDATA[
100:
101: var svgdoc=document;
102: var svgroot=svgdoc.documentElement;
103: var objekt,oldobj,oldclass,xmldoc,AN,EN,SY,AW,BP,IP,EY,AR,MP,DE;
104: var ANobj,ENobj,SYobj,AWobj,BPobj,IPobj,EYobj,ARobj,MPobj,DEobj;
105: var A=String.fromCharCode(197); // Angstroem-Zeichen
106: var url,req;
107:
108: // Ereignisse fuer die Boxen der chemischen Elemente ueberwachen
109: svgroot.addEventListener("mouseover",ElementOver,false);
110: svgroot.addEventListener("mouseout",ElementOut,false);
111: svgroot.addEventListener("click",ElementClick,false);
112:
113:
114: function ElementOver(mouseover_evt)
115: {
116: objekt=mouseover_evt.target;
117:
118: if(objekt.parentNode.tagName=="g" && objekt.parentNode.firstChild.getAttribute("class")!="aktelem")
119: {
120: objekt.style.setProperty("fill-opacity","0.4","");
121: }
122: }
123:
124:
125: function ElementOut(mouseout_evt)
126: {
127: objekt=mouseout_evt.target;
128:
129: if(objekt.parentNode.tagName=="g")
130: {
131: objekt.style.setProperty("fill-opacity","1.0","");
132: }
133: }
134:
135:
136: function ElementClick(mouseclick_evt)
137: {
138: objekt=mouseclick_evt.target;
139:
140: if(objekt.parentNode.tagName=="g")
141: {
142: // Ausgabetexte loeschen
143: svgdoc.getElementById("ANout").firstChild.nodeValue="";
144: svgdoc.getElementById("ENout").firstChild.nodeValue="";
145: svgdoc.getElementById("SYout").firstChild.nodeValue="";
146: svgdoc.getElementById("AWout").firstChild.nodeValue="";
147: svgdoc.getElementById("BPout").firstChild.nodeValue="";
148: svgdoc.getElementById("IPout").firstChild.nodeValue="";
149: svgdoc.getElementById("EYout").firstChild.nodeValue="";
150: svgdoc.getElementById("ARout").firstChild.nodeValue="";
151: svgdoc.getElementById("MPout").firstChild.nodeValue="";
152: svgdoc.getElementById("DEout").firstChild.nodeValue="";
153:
154: // aktuelles Element gelb markieren - vorheriges Element zurueck setzen
155: if(oldobj)oldobj.parentNode.firstChild.setAttribute("class",oldclass);
156: oldclass=objekt.parentNode.firstChild.getAttribute("class");
157: objekt.parentNode.firstChild.setAttribute("class","aktelem");
158: objekt.parentNode.firstChild.style.setProperty("fill-opacity","1.0","");
159: oldobj=objekt;
160: }
161: }
162:
163:
164: function HoleDaten(EName)
165: {
166: // Beispielaufruf von ptable.php:
167: // http://.../ptable.php?EName=Actinium
168: url="ptable.php?EName="+EName;
169: req=false;
170:
171: if(window.getURL)getURL(url,callback);
172: else if(window.XMLHttpRequest)
173: {
174: req=new XMLHttpRequest();
175: if(req)
176: {
177: req.onreadystatechange=callback2;
178: req.open("GET",url,true);
179: req.send(null);
180: }
181: }
182: }
183:
184:
185: function callback(urlRequestStatus)
186: {
187: if(urlRequestStatus.success && urlRequestStatus.content!="Error!")
188: {
189: xmldoc=parseXML(urlRequestStatus.content).documentElement;
190: if(xmldoc)BearbeiteDaten();
191: }
192: else Fehler();
193: }
194:
195:
196: function callback2()
197: {
198: if(req.readyState==4)
199: {
200: if(req.status==200 && req.responseText!="Error!")
201: {
202: xmldoc=req.responseXML.documentElement;
203: if(xmldoc)BearbeiteDaten();
204: }
205: else Fehler();
206: }
207: }
208:
209:
210: function Fehler()
211: {
212: // gelb markiertes Element zurueck setzen
213: if(oldobj)oldobj.parentNode.firstChild.setAttribute("class",oldclass);
214: // Fehlermeldung ausgeben
215: alert("Bei der Abfrage von WebserviceX.NET\nist ein Fehler aufgetreten!");
216: }
217:
218:
219: function BearbeiteDaten()
220: {
221: // Wurzelelement: NewDataSet (mit Kindelement Table)
222: // Kindelemente von Table:
223: // AtomicNumber, ElementName, Symbol, AtomicWeight, BoilingPoint,
224: // IonisationPotential, EletroNegativity, AtomicRadius, MeltingPoint, Density
225:
226: // XML-Daten auslesen
227: ANobj=xmldoc.getElementsByTagName("AtomicNumber");
228: if(ANobj && ANobj.length>0)AN=ANobj.item(0).firstChild.nodeValue;
229: else AN="";
230:
231: ENobj=xmldoc.getElementsByTagName("ElementName");
232: if(ENobj && ENobj.length>0)EN=ENobj.item(0).firstChild.nodeValue;
233: else EN="";
234:
235: SYobj=xmldoc.getElementsByTagName("Symbol");
236: if(SYobj && SYobj.length>0)SY=SYobj.item(0).firstChild.nodeValue;
237: else SY="";
238:
239: AWobj=xmldoc.getElementsByTagName("AtomicWeight");
240: if(AWobj && AWobj.length>0)AW=AWobj.item(0).firstChild.nodeValue;
241: else AW="";
242:
243: BPobj=xmldoc.getElementsByTagName("BoilingPoint");
244: if(BPobj && BPobj.length>0)BP=BPobj.item(0).firstChild.nodeValue;
245: else BP="";
246:
247: IPobj=xmldoc.getElementsByTagName("IonisationPotential");
248: if(IPobj && IPobj.length>0)IP=IPobj.item(0).firstChild.nodeValue;
249: else IP="";
250:
251: EYobj=xmldoc.getElementsByTagName("EletroNegativity");
252: if(EYobj && EYobj.length>0)EY=EYobj.item(0).firstChild.nodeValue;
253: else EY="";
254:
255: ARobj=xmldoc.getElementsByTagName("AtomicRadius");
256: if(ARobj && ARobj.length>0)AR=ARobj.item(0).firstChild.nodeValue;
257: else AR="";
258:
259: MPobj=xmldoc.getElementsByTagName("MeltingPoint");
260: if(MPobj && MPobj.length>0)MP=MPobj.item(0).firstChild.nodeValue;
261: else MP="";
262:
263: DEobj=xmldoc.getElementsByTagName("Density");
264: if(DEobj && DEobj.length>0)DE=DEobj.item(0).firstChild.nodeValue;
265: else DE="";
266:
267: // auf max. 6 Stellen runden E i n h e i t e n
268: if(AR!="")AR=parseFloat(AR).toFixed(6)+" "+A; // Angstroem (A = Å)
269: if(AW!="")AW=parseFloat(AW).toFixed(6)+" u"; // atomic units
270: if(BP!="")BP=parseFloat(BP).toFixed(6)+" K"; // Kelvin
271: if(MP!="")MP=parseFloat(MP).toFixed(6)+" K"; // Kelvin
272: if(IP!="")IP=parseFloat(IP).toFixed(6)+" eV"; // Elektronenvolt
273: if(EY!="")EY=parseFloat(EY).toFixed(6);
274: if(DE!="")DE+=" kg / m^3"; // Kilogramm pro Kubikmeter
275:
276: // Ergebnisse ausgeben
277: svgdoc.getElementById("ANout").firstChild.nodeValue=AN;
278: svgdoc.getElementById("ENout").firstChild.nodeValue=EN;
279: svgdoc.getElementById("SYout").firstChild.nodeValue=SY;
280: svgdoc.getElementById("AWout").firstChild.nodeValue=AW;
281: svgdoc.getElementById("BPout").firstChild.nodeValue=BP;
282: svgdoc.getElementById("IPout").firstChild.nodeValue=IP;
283: svgdoc.getElementById("EYout").firstChild.nodeValue=EY;
284: svgdoc.getElementById("ARout").firstChild.nodeValue=AR;
285: svgdoc.getElementById("MPout").firstChild.nodeValue=MP;
286: svgdoc.getElementById("DEout").firstChild.nodeValue=DE;
287: }
288:
289: ]]>
290: </script>
291:
292: </defs>
293:
294: <text x="20" y="30" style="fill: #000; font-size: 24px">
295: Periodensystem der Elemente mit Online-Datenabfrage</text>
296:
297: <!-- Gruppennummern -->
298: <text x="45" y="70">Hauptgruppe</text>
299: <text x="58" y="90">I</text>
300: <text x="88" y="90">II</text>
301:
302: <text x="220" y="160">Nebengruppe</text>
303: <text x="118" y="180">III</text>
304: <text x="148" y="180">IV</text>
305: <text x="178" y="180">V</text>
306: <text x="208" y="180">VI</text>
307: <text x="238" y="180">VII</text>
308: <text x="298" y="180">VIII</text>
309: <text x="358" y="180">I</text>
310: <text x="388" y="180">II</text>
311:
312: <text x="470" y="70">Hauptgruppe</text>
313: <text x="418" y="90">III</text>
314: <text x="448" y="90">IV</text>
315: <text x="478" y="90">V</text>
316: <text x="508" y="90">VI</text>
317: <text x="538" y="90">VII</text>
318: <text x="568" y="90">VIII</text>
319:
320: <!-- Periodennummern -->
321: <text x="45" y="70" transform="translate(-45,270) rotate(-90)">Periode</text>
322: <text x="35" y="120">1</text>
323: <text x="35" y="150">2</text>
324: <text x="35" y="180">3</text>
325: <text x="35" y="210">4</text>
326: <text x="35" y="240">5</text>
327: <text x="35" y="270">6</text>
328: <text x="35" y="300">7</text>
329:
330: <!-- Lanthanoide/Actinoide -->
331: <text x="35" y="350">Lanthanoide</text>
332: <text x="35" y="390">Actinoide</text>
333:
334: <!-- Legende der Farben -->
335: <text x="35" y="430">Zuordung der Farben:</text>
336: <rect class="nm fbox" x="35" y="440" width="10" height="10"/><text x="50" y="450">> Nichtmetalle</text>
337: <rect class="hm fbox" x="35" y="455" width="10" height="10"/><text x="50" y="465">> Halbmetalle</text>
338: <rect class="mh fbox" x="35" y="470" width="10" height="10"/><text x="50" y="480">> Hauptgruppen-Metalle</text>
339: <rect class="mn fbox" x="35" y="485" width="10" height="10"/><text x="50" y="495">> Nebengruppen-Metalle</text>
340: <rect class="aktelem fbox" x="35" y="500" width="10" height="10"/><text x="50" y="510">> Aktuelles Element</text>
341:
342: <!-- 1. Hauptgruppe -->
343: <g onclick="HoleDaten('Hydrogen')"><rect class="nm" x="50" y="100" width="30" height="30"/><text x="58" y="120">H</text></g>
344: <g onclick="HoleDaten('Lithium')"><rect class="mh" x="50" y="130" width="30" height="30"/><text x="58" y="150">Li</text></g>
345: <g onclick="HoleDaten('Sodium')"><rect class="mh" x="50" y="160" width="30" height="30"/><text x="58" y="180">Na</text></g>
346: <g onclick="HoleDaten('Potassium')"><rect class="mh" x="50" y="190" width="30" height="30"/><text x="58" y="210">K</text></g>
347: <g onclick="HoleDaten('Rubidium')"><rect class="mh" x="50" y="220" width="30" height="30"/><text x="58" y="240">Rb</text></g>
348: <g onclick="HoleDaten('Cesium')"><rect class="mh" x="50" y="250" width="30" height="30"/><text x="58" y="270">Cs</text></g>
349: <g onclick="HoleDaten('Francium')"><rect class="mh" x="50" y="280" width="30" height="30"/><text x="58" y="300">Fr</text></g>
350:
351: <!-- 2. Hauptgruppe -->
352: <g onclick="HoleDaten('Beryllium')"><rect class="mh" x="80" y="130" width="30" height="30"/><text x="88" y="150">Be</text></g>
353: <g onclick="HoleDaten('Magnesium')"><rect class="mh" x="80" y="160" width="30" height="30"/><text x="88" y="180">Mg</text></g>
354: <g onclick="HoleDaten('Calcium')"><rect class="mh" x="80" y="190" width="30" height="30"/><text x="88" y="210">Ca</text></g>
355: <g onclick="HoleDaten('Strontium')"><rect class="mh" x="80" y="220" width="30" height="30"/><text x="88" y="240">Sr</text></g>
356: <g onclick="HoleDaten('Barium')"><rect class="mh" x="80" y="250" width="30" height="30"/><text x="88" y="270">Ba</text></g>
357: <g onclick="HoleDaten('Radium')"><rect class="mh" x="80" y="280" width="30" height="30"/><text x="88" y="300">Ra</text></g>
358:
359: <!-- 3. Nebengruppe -->
360: <g onclick="HoleDaten('Scandium')"><rect class="mn" x="110" y="190" width="30" height="30"/><text x="118" y="210">Sc</text></g>
361: <g onclick="HoleDaten('Yttrium')"><rect class="mn" x="110" y="220" width="30" height="30"/><text x="118" y="240">Y</text></g>
362: <g onclick="HoleDaten('Lanthanum')"><rect class="mn" x="110" y="250" width="30" height="30"/><text x="118" y="270">La</text></g>
363: <g onclick="HoleDaten('Actinium')"><rect class="mn" x="110" y="280" width="30" height="30"/><text x="118" y="300">Ac</text></g>
364:
365: <!-- 4. Nebengruppe -->
366: <g onclick="HoleDaten('Titanium')"><rect class="mn" x="140" y="190" width="30" height="30"/><text x="148" y="210">Ti</text></g>
367: <g onclick="HoleDaten('Zirconium')"><rect class="mn" x="140" y="220" width="30" height="30"/><text x="148" y="240">Zr</text></g>
368: <g onclick="HoleDaten('Hafnium')"><rect class="mn" x="140" y="250" width="30" height="30"/><text x="148" y="270">Hf</text></g>
369: <g onclick="HoleDaten('Curcigtonium')"><rect class="mn" x="140" y="280" width="30" height="30"/><text x="148" y="300">Ku</text></g>
370:
371: <!-- 5. Nebengruppe -->
372: <g onclick="HoleDaten('Vanadium')"><rect class="mn" x="170" y="190" width="30" height="30"/><text x="178" y="210">V</text></g>
373: <g onclick="HoleDaten('Niobium')"><rect class="mn" x="170" y="220" width="30" height="30"/><text x="178" y="240">Nb</text></g>
374: <g onclick="HoleDaten('Tantalum')"><rect class="mn" x="170" y="250" width="30" height="30"/><text x="178" y="270">Ta</text></g>
375: <g onclick="HoleDaten('Hahnium')"><rect class="mn" x="170" y="280" width="30" height="30"/><text x="178" y="300">Ha</text></g>
376:
377: <!-- 6. Nebengruppe -->
378: <g onclick="HoleDaten('Chromium')"><rect class="mn" x="200" y="190" width="30" height="30"/><text x="208" y="210">Cr</text></g>
379: <g onclick="HoleDaten('Molybdenum')"><rect class="mn" x="200" y="220" width="30" height="30"/><text x="208" y="240">Mo</text></g>
380: <g onclick="HoleDaten('Tungsten')"><rect class="mn" x="200" y="250" width="30" height="30"/><text x="208" y="270">W</text></g>
381: <g onclick="HoleDaten('Seaborgium')"><rect class="mn" x="200" y="280" width="30" height="30"/><text x="208" y="300">Sg</text></g>
382:
383: <!-- 7. Nebengruppe -->
384: <g onclick="HoleDaten('Manganese')"><rect class="mn" x="230" y="190" width="30" height="30"/><text x="238" y="210">Mn</text></g>
385: <g onclick="HoleDaten('Technetium')"><rect class="mn" x="230" y="220" width="30" height="30"/><text x="238" y="240">Tc</text></g>
386: <g onclick="HoleDaten('Rhenium')"><rect class="mn" x="230" y="250" width="30" height="30"/><text x="238" y="270">Re</text></g>
387: <g onclick="HoleDaten('Bohrium')"><rect class="mn" x="230" y="280" width="30" height="30"/><text x="238" y="300">Bh</text></g>
388:
389: <!-- 8. Nebengruppe -->
390: <g onclick="HoleDaten('Iron')"><rect class="mn" x="260" y="190" width="30" height="30"/><text x="268" y="210">Fe</text></g>
391: <g onclick="HoleDaten('Ruthenium')"><rect class="mn" x="260" y="220" width="30" height="30"/><text x="268" y="240">Ru</text></g>
392: <g onclick="HoleDaten('Osmium')"><rect class="mn" x="260" y="250" width="30" height="30"/><text x="268" y="270">Os</text></g>
393: <g onclick="HoleDaten('Hassium')"><rect class="mn" x="260" y="280" width="30" height="30"/><text x="268" y="300">Hs</text></g>
394: <g onclick="HoleDaten('Cobalt')"><rect class="mn" x="290" y="190" width="30" height="30"/><text x="298" y="210">Co</text></g>
395: <g onclick="HoleDaten('Rhodium')"><rect class="mn" x="290" y="220" width="30" height="30"/><text x="298" y="240">Rh</text></g>
396: <g onclick="HoleDaten('Iridium')"><rect class="mn" x="290" y="250" width="30" height="30"/><text x="298" y="270">Ir</text></g>
397: <g onclick="HoleDaten('Meitnerium')"><rect class="mn" x="290" y="280" width="30" height="30"/><text x="298" y="300">Mt</text></g>
398: <g onclick="HoleDaten('Nickel')"><rect class="mn" x="320" y="190" width="30" height="30"/><text x="328" y="210">Ni</text></g>
399: <g onclick="HoleDaten('Palladium')"><rect class="mn" x="320" y="220" width="30" height="30"/><text x="328" y="240">Pd</text></g>
400: <g onclick="HoleDaten('Platinum')"><rect class="mn" x="320" y="250" width="30" height="30"/><text x="328" y="270">Pt</text></g>
401: <g onclick="HoleDaten('Ununnilium')"><rect class="mn" x="320" y="280" width="30" height="30"/><text x="325" y="300">Uun</text></g>
402:
403: <!-- 1. Nebengruppe -->
404: <g onclick="HoleDaten('Copper')"><rect class="mn" x="350" y="190" width="30" height="30"/><text x="358" y="210">Cu</text></g>
405: <g onclick="HoleDaten('Silver')"><rect class="mn" x="350" y="220" width="30" height="30"/><text x="358" y="240">Ag</text></g>
406: <g onclick="HoleDaten('Gold')"><rect class="mn" x="350" y="250" width="30" height="30"/><text x="358" y="270">Au</text></g>
407: <g onclick="HoleDaten('Unununium')"><rect class="mn" x="350" y="280" width="30" height="30"/><text x="355" y="300">Uuu</text></g>
408:
409: <!-- 2. Nebengruppe -->
410: <g onclick="HoleDaten('Zinc')"><rect class="mn" x="380" y="190" width="30" height="30"/><text x="388" y="210">Zn</text></g>
411: <g onclick="HoleDaten('Cadmium')"><rect class="mn" x="380" y="220" width="30" height="30"/><text x="388" y="240">Cd</text></g>
412: <g onclick="HoleDaten('Mercury')"><rect class="mn" x="380" y="250" width="30" height="30"/><text x="388" y="270">Hg</text></g>
413: <g onclick="HoleDaten('Ununbium')"><rect class="mn" x="380" y="280" width="30" height="30"/><text x="385" y="300">Uub</text></g>
414:
415: <!-- 3. Hauptgruppe -->
416: <g onclick="HoleDaten('Boron')"><rect class="hm" x="410" y="130" width="30" height="30"/><text x="418" y="150">B</text></g>
417: <g onclick="HoleDaten('Aluminium')"><rect class="mh" x="410" y="160" width="30" height="30"/><text x="418" y="180">Al</text></g>
418: <g onclick="HoleDaten('Gallium')"><rect class="mh" x="410" y="190" width="30" height="30"/><text x="418" y="210">Ga</text></g>
419: <g onclick="HoleDaten('Indium')"><rect class="mh" x="410" y="220" width="30" height="30"/><text x="418" y="240">In</text></g>
420: <g onclick="HoleDaten('Thallium')"><rect class="mh" x="410" y="250" width="30" height="30"/><text x="418" y="270">Tl</text></g>
421:
422: <!-- 4. Hauptgruppe -->
423: <g onclick="HoleDaten('Carbon')"><rect class="nm" x="440" y="130" width="30" height="30"/><text x="448" y="150">C</text></g>
424: <g onclick="HoleDaten('Silicon')"><rect class="hm" x="440" y="160" width="30" height="30"/><text x="448" y="180">Si</text></g>
425: <g onclick="HoleDaten('Germanium')"><rect class="hm" x="440" y="190" width="30" height="30"/><text x="448" y="210">Ge</text></g>
426: <g onclick="HoleDaten('Tin')"><rect class="mh" x="440" y="220" width="30" height="30"/><text x="448" y="240">Sn</text></g>
427: <g onclick="HoleDaten('Lead')"><rect class="mh" x="440" y="250" width="30" height="30"/><text x="448" y="270">Pb</text></g>
428:
429: <!-- 5. Hauptgruppe -->
430: <g onclick="HoleDaten('Nitrogen')"><rect class="nm" x="470" y="130" width="30" height="30"/><text x="478" y="150">N</text></g>
431: <g onclick="HoleDaten('Phosphorous')"><rect class="nm" x="470" y="160" width="30" height="30"/><text x="478" y="180">P</text></g>
432: <g onclick="HoleDaten('Arsenic')"><rect class="hm" x="470" y="190" width="30" height="30"/><text x="478" y="210">As</text></g>
433: <g onclick="HoleDaten('Antimony')"><rect class="hm" x="470" y="220" width="30" height="30"/><text x="478" y="240">Sb</text></g>
434: <g onclick="HoleDaten('Bismuth')"><rect class="mh" x="470" y="250" width="30" height="30"/><text x="478" y="270">Bi</text></g>
435:
436: <!-- 6. Hauptgruppe -->
437: <g onclick="HoleDaten('Oxygen')"><rect class="nm" x="500" y="130" width="30" height="30"/><text x="508" y="150">O</text></g>
438: <g onclick="HoleDaten('Sulphur')"><rect class="nm" x="500" y="160" width="30" height="30"/><text x="508" y="180">S</text></g>
439: <g onclick="HoleDaten('Selenium')"><rect class="nm" x="500" y="190" width="30" height="30"/><text x="508" y="210">Se</text></g>
440: <g onclick="HoleDaten('Telurium')"><rect class="hm" x="500" y="220" width="30" height="30"/><text x="508" y="240">Te</text></g>
441: <g onclick="HoleDaten('Polonium')"><rect class="hm" x="500" y="250" width="30" height="30"/><text x="508" y="270">Po</text></g>
442:
443: <!-- 7. Hauptgruppe -->
444: <g onclick="HoleDaten('Flourine')"><rect class="nm" x="530" y="130" width="30" height="30"/><text x="538" y="150">F</text></g>
445: <g onclick="HoleDaten('Chlorine')"><rect class="nm" x="530" y="160" width="30" height="30"/><text x="538" y="180">Cl</text></g>
446: <g onclick="HoleDaten('Bromine')"><rect class="nm" x="530" y="190" width="30" height="30"/><text x="538" y="210">Br</text></g>
447: <g onclick="HoleDaten('Iodine')"><rect class="nm" x="530" y="220" width="30" height="30"/><text x="538" y="240">I</text></g>
448: <g onclick="HoleDaten('Astatine')"><rect class="hm" x="530" y="250" width="30" height="30"/><text x="538" y="270">At</text></g>
449:
450: <!-- 8. Hauptgruppe -->
451: <g onclick="HoleDaten('Helium')"><rect class="nm" x="560" y="100" width="30" height="30"/><text x="568" y="120">He</text></g>
452: <g onclick="HoleDaten('Neon')"><rect class="nm" x="560" y="130" width="30" height="30"/><text x="568" y="150">Ne</text></g>
453: <g onclick="HoleDaten('Argon')"><rect class="nm" x="560" y="160" width="30" height="30"/><text x="568" y="180">Ar</text></g>
454: <g onclick="HoleDaten('Krypton')"><rect class="nm" x="560" y="190" width="30" height="30"/><text x="568" y="210">Kr</text></g>
455: <g onclick="HoleDaten('Xenon')"><rect class="nm" x="560" y="220" width="30" height="30"/><text x="568" y="240">Xe</text></g>
456: <g onclick="HoleDaten('Radon')"><rect class="nm" x="560" y="250" width="30" height="30"/><text x="568" y="270">Rn</text></g>
457:
458: <!-- 3. Nebengruppe - Lanthanoide -->
459: <g onclick="HoleDaten('Cerium')"><rect class="mn" x="110" y="330" width="30" height="30"/><text x="118" y="350">Ce</text></g>
460: <g onclick="HoleDaten('Praseodymium')"><rect class="mn" x="140" y="330" width="30" height="30"/><text x="148" y="350">Pr</text></g>
461: <g onclick="HoleDaten('Neodymium')"><rect class="mn" x="170" y="330" width="30" height="30"/><text x="178" y="350">Nd</text></g>
462: <g onclick="HoleDaten('Promethium')"><rect class="mn" x="200" y="330" width="30" height="30"/><text x="208" y="350">Pm</text></g>
463: <g onclick="HoleDaten('Samarium')"><rect class="mn" x="230" y="330" width="30" height="30"/><text x="238" y="350">Sm</text></g>
464: <g onclick="HoleDaten('Europium')"><rect class="mn" x="260" y="330" width="30" height="30"/><text x="268" y="350">Eu</text></g>
465: <g onclick="HoleDaten('Gadolinium')"><rect class="mn" x="290" y="330" width="30" height="30"/><text x="298" y="350">Gd</text></g>
466: <g onclick="HoleDaten('Terbium')"><rect class="mn" x="320" y="330" width="30" height="30"/><text x="328" y="350">Tb</text></g>
467: <g onclick="HoleDaten('Dysprosium')"><rect class="mn" x="350" y="330" width="30" height="30"/><text x="358" y="350">Dy</text></g>
468: <g onclick="HoleDaten('Holmium')"><rect class="mn" x="380" y="330" width="30" height="30"/><text x="388" y="350">Ho</text></g>
469: <g onclick="HoleDaten('Erbium')"><rect class="mn" x="410" y="330" width="30" height="30"/><text x="418" y="350">Er</text></g>
470: <g onclick="HoleDaten('Thulium')"><rect class="mn" x="440" y="330" width="30" height="30"/><text x="448" y="350">Tm</text></g>
471: <g onclick="HoleDaten('Ytterbium')"><rect class="mn" x="470" y="330" width="30" height="30"/><text x="478" y="350">Yb</text></g>
472: <g onclick="HoleDaten('Lutetium')"><rect class="mn" x="500" y="330" width="30" height="30"/><text x="508" y="350">Lu</text></g>
473:
474: <!-- Markierungslinien fuer Lanthanoide -->
475: <line class="la" x1="140" y1="251" x2="140" y2="279"/>
476: <line class="la" x1="110" y1="331" x2="110" y2="359"/>
477: <line class="la" x1="530" y1="331" x2="530" y2="359"/>
478:
479: <!-- 3. Nebengruppe - Actinoide -->
480: <g onclick="HoleDaten('Thorium')"><rect class="mn" x="110" y="370" width="30" height="30"/><text x="118" y="390">Th</text></g>
481: <g onclick="HoleDaten('Protactinium')"><rect class="mn" x="140" y="370" width="30" height="30"/><text x="148" y="390">Pa</text></g>
482: <g onclick="HoleDaten('Uranium')"><rect class="mn" x="170" y="370" width="30" height="30"/><text x="178" y="390">U</text></g>
483: <g onclick="HoleDaten('Neptunium')"><rect class="mn" x="200" y="370" width="30" height="30"/><text x="208" y="390">Np</text></g>
484: <g onclick="HoleDaten('Plutonium')"><rect class="mn" x="230" y="370" width="30" height="30"/><text x="238" y="390">Pu</text></g>
485: <g onclick="HoleDaten('Americium')"><rect class="mn" x="260" y="370" width="30" height="30"/><text x="268" y="390">Am</text></g>
486: <g onclick="HoleDaten('Curium')"><rect class="mn" x="290" y="370" width="30" height="30"/><text x="298" y="390">Cm</text></g>
487: <g onclick="HoleDaten('Berkelium')"><rect class="mn" x="320" y="370" width="30" height="30"/><text x="328" y="390">Bk</text></g>
488: <g onclick="HoleDaten('Californium')"><rect class="mn" x="350" y="370" width="30" height="30"/><text x="358" y="390">Cf</text></g>
489: <g onclick="HoleDaten('Einsteinium')"><rect class="mn" x="380" y="370" width="30" height="30"/><text x="388" y="390">Es</text></g>
490: <g onclick="HoleDaten('Fermium')"><rect class="mn" x="410" y="370" width="30" height="30"/><text x="418" y="390">Fm</text></g>
491: <g onclick="HoleDaten('Mendelevium')"><rect class="mn" x="440" y="370" width="30" height="30"/><text x="448" y="390">Md</text></g>
492: <g onclick="HoleDaten('Nobelium')"><rect class="mn" x="470" y="370" width="30" height="30"/><text x="478" y="390">No</text></g>
493: <g onclick="HoleDaten('Lawrencium')"><rect class="mn" x="500" y="370" width="30" height="30"/><text x="508" y="390">Lr</text></g>
494:
495: <!-- Markierungslinien fuer Actinoide -->
496: <line class="ac" x1="140" y1="281" x2="140" y2="309"/>
497: <line class="ac" x1="110" y1="371" x2="110" y2="399"/>
498: <line class="ac" x1="530" y1="371" x2="530" y2="399"/>
499:
500: <!-- Ausgabe-Box mit statischen und dynamischen Inhalten -->
501: <rect x="200" y="430" rx="5" width="390" height="100"/>
502:
503: <a xlink:href="http://www.webservicex.net/WS/WSDetails.aspx?WSID=19&CATID=7" target="_top">
504: <text x="315" y="445" style="fill: #000; font-size: 12px; pointer-events: visible">
505: Daten von WebserviceX.NET
506: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
507: <set attributeName="text-decoration" attributeType="CSS" to="underline"
508: begin="mouseover"/>
509: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
510: <set attributeName="text-decoration" attributeType="CSS" to="none"
511: begin="mouseout"/>
512: </text>
513: </a>
514:
515: <!-- dynamische Daten - Beschreibungen -->
516: <g class="daten1">
517: <text x="205" y="465">Symbol:</text>
518: <text x="205" y="480">ElementName:</text>
519: <text x="205" y="495">AtomicNumber:</text>
520: <text x="205" y="510">AtomicWeight:</text>
521: <text x="205" y="525">AtomicRadius:</text>
522: <text x="380" y="465">Density:</text>
523: <text x="380" y="480">MeltingPoint:</text>
524: <text x="380" y="495">BoilingPoint:</text>
525: <text x="380" y="510">ElectroNegativity:</text>
526: <text x="380" y="525">IonisationPotential:</text>
527: </g>
528:
529: <!-- dynamische Daten - Platzhalter -->
530: <g class="daten2">
531: <text id="SYout" x="290" y="465"> </text>
532: <text id="ENout" x="290" y="480"> </text>
533: <text id="ANout" x="290" y="495"> </text>
534: <text id="AWout" x="290" y="510"> </text>
535: <text id="ARout" x="290" y="525"> </text>
536: <text id="DEout" x="485" y="465"> </text>
537: <text id="MPout" x="485" y="480"> </text>
538: <text id="BPout" x="485" y="495"> </text>
539: <text id="EYout" x="485" y="510"> </text>
540: <text id="IPout" x="485" y="525"> </text>
541: </g>
542:
543: <a xlink:href="ptable_php.txt" target="_top">
544: <text x="35" y="530" style="fill: #000; font-size: 11px; pointer-events: visible">
545: PHP-Script zur Datenabfrage
546: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
547: <set attributeName="text-decoration" attributeType="CSS" to="underline"
548: begin="mouseover"/>
549: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
550: <set attributeName="text-decoration" attributeType="CSS" to="none"
551: begin="mouseout"/>
552: </text>
553: </a>
554:
555: </svg>
[zum Anfang]