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]
