/
drawingedited10.html
200 lines (147 loc) · 13.8 KB
/
drawingedited10.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" charset="utf-8">
//this version allows you to click on text and color the image of a cell.
function sayHello() {
alert("hi");}
function changeStyle(selectorText, styleProperty, propertyValue){
var theRules = new Array();
if (document.styleSheets[0].cssRules) {
theRules = document.styleSheets[0].cssRules;
}
else if (document.styleSheets[0].rules) {
theRules = document.styleSheets[0].rules;
}
else{
alert("No Stylesheet Present");}
for (n in theRules) {
if (theRules[n].selectorText == selectorText) {
var theStyleProperties=theRules[n].style;
theStyleProperties.setProperty(styleProperty,propertyValue, 'important');
// alert(theStyleProperties.getPropertyCSSValue(styleProperty).cssText)
//for (m in theStyleProperties){
// if(theStyleProperties[m]==styleProperty){
// alert(theStyleProperties[m]);}
// else{
// alert("Did not work");}
//}
}
}
}
</script>
</head>
<body>
<p onclick="changeStyle('path.cell', 'fill', '#FF0000')">Cell = Red</p>
<p onclick="changeStyle('path.nucleus', 'fill', '#00FF00')">Nucleus = Green</p>
<p onclick="changeStyle('path.vacuole', 'fill', '#0000FF')">Vacuoles= Blue</p>
<p onclick="changeStyle('path.centrosphere', 'fill', '#FFFF00')">centrosphere= yellow</p>
<p onclick="changeStyle('path.centriol', 'fill', '#00FFFF')">centriol= light blue</p>
<p onclick="changeStyle('path.nucleolus', 'fill', '#00FF99')">nucleolus= light Green</p>
<p onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')">cellinclusion= purple</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
width="100%" height="100%"
viewBox="200.000000 346.000000 600.000000 308.000000"
xml:space="preserve">
<style type="text/css" >
<![CDATA[
path {
opacity:1;
fill:white;
stroke:rgb(0,0,0);
stroke-width:3.000000;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
path.cell {
opacity:1;
fill:white;
stroke:rgb(0,0,0);
}
path.nucleus{
fill:white;
}
path.vacuole{
fill:white;
}
path.centrosphere{
fill:white;
}
path.centriol{
fill:white;
}
path.cellinclusion{
fill:white;
}
path.nucleolus{
fill:white;
}
]]>
</style>
<path class="cell" onclick="changeStyle('path.cell', 'fill', '#FF0000')"
d="M301.50,505.80C301.50,426.99,366.73,363.10,447.20,363.10C527.67,363.10,592.90,426.99,592.90,505.80C592.90,584.61,527.67,648.50,447.20,648.50C366.73,648.50,301.50,584.61,301.50,505.80Z"/>
<path class="nucleus" onclick="changeStyle('path.nucleus', 'fill', '#00FF00')"
d="M398.02,482.51C398.02,458.17,418.28,438.44,443.26,438.44C468.25,438.44,488.50,458.17,488.50,482.51C488.50,506.84,468.25,526.57,443.26,526.57C418.28,526.57,398.02,506.84,398.02,482.51Z"/>
<path
class="vacuole" onclick="changeStyle('path.vacuole', 'fill', '#0000FF')" d="M381.50,582.40C381.50,570.86,391.37,561.50,403.55,561.50C415.72,561.50,425.59,570.86,425.59,582.40C425.59,593.94,415.72,603.29,403.55,603.29C391.37,603.29,381.50,593.94,381.50,582.40Z"/>
<path
class="vacuole" onclick="changeStyle('path.vacuole', 'fill', '#0000FF')"
d="M459.96,554.61C459.96,543.72,468.58,534.89,479.23,534.89C489.87,534.89,498.50,543.72,498.50,554.61C498.50,565.49,489.87,574.32,479.23,574.32C468.58,574.32,459.96,565.49,459.96,554.61Z"/>
<path
class="centrosphere" onclick="changeStyle('path.centrosphere', 'fill', '#FFFF00')"
d="M429.22,418.38C429.22,409.06,436.62,401.50,445.75,401.50C454.88,401.50,462.28,409.06,462.28,418.38C462.28,427.70,454.88,435.26,445.75,435.26C436.62,435.26,429.22,427.70,429.22,418.38Z"/>
<path class="centriol" onclick="changeStyle('path.centriol', 'fill', '#00FFFF')"
d="M444.93,412.25C444.67,412.67,444.26,412.71,444.00,412.33C443.75,411.94,443.40,411.56,443.23,411.48C443.06,411.39,442.79,411.26,442.62,411.17C442.45,411.09,442.10,410.91,441.85,410.79C441.59,410.66,441.25,410.56,441.08,410.56C440.91,410.56,440.53,410.56,440.23,410.56C439.94,410.56,439.56,410.56,439.39,410.56C439.22,410.56,438.91,410.59,438.69,410.63C438.48,410.68,438.14,410.88,437.92,411.10C437.71,411.31,437.44,411.58,437.31,411.71C437.18,411.84,437.01,412.11,436.92,412.33C436.84,412.54,436.74,412.85,436.69,413.02C436.65,413.19,436.62,413.57,436.62,413.86C436.62,414.16,436.58,414.58,436.54,414.79C436.50,415.00,436.46,415.45,436.46,415.79C436.46,416.13,436.46,416.54,436.46,416.71C436.46,416.88,436.46,417.12,436.46,417.25C436.46,417.38,436.46,417.65,436.46,417.86C436.46,418.08,436.60,418.42,436.77,418.63C436.94,418.85,437.22,419.23,437.39,419.48C437.56,419.74,437.76,420.01,437.85,420.10C437.93,420.18,438.17,420.39,438.39,420.56C438.60,420.73,438.87,420.93,439.00,421.02C439.13,421.10,439.40,421.17,439.62,421.17C439.83,421.17,440.07,421.17,440.16,421.17C440.24,421.17,440.48,421.17,440.69,421.17C440.91,421.17,441.25,421.10,441.46,421.02C441.68,420.93,441.95,420.80,442.08,420.71C442.21,420.63,442.45,420.45,442.62,420.33C442.79,420.20,442.96,420.06,443.00,420.02C443.04,419.98,443.08,419.91,443.08,419.86C443.08,419.82,443.11,419.79,443.16,419.79C443.20,419.79,443.27,419.79,443.31,419.79C443.35,419.79,443.42,419.79,443.46,419.79C443.51,419.79,443.57,419.86,443.62,419.94C443.66,420.03,443.73,420.16,443.77,420.25C443.81,420.33,443.99,420.51,444.16,420.63C444.33,420.76,444.53,420.93,444.62,421.02C444.70,421.10,444.87,421.28,445.00,421.40C445.13,421.53,445.37,421.63,445.54,421.63C445.71,421.63,446.05,421.63,446.31,421.63C446.56,421.63,446.87,421.63,447.00,421.63C447.13,421.63,447.41,421.63,447.62,421.63C447.83,421.63,448.11,421.63,448.23,421.63C448.36,421.63,448.64,421.57,448.85,421.48C449.06,421.40,449.34,421.22,449.46,421.10C449.59,420.97,449.87,420.69,450.08,420.48C450.29,420.27,450.57,419.96,450.69,419.79C450.82,419.62,451.03,419.31,451.16,419.10C451.28,418.88,451.46,418.54,451.54,418.33C451.63,418.11,451.76,417.77,451.85,417.56C451.93,417.34,452.00,417.00,452.00,416.79C452.00,416.58,452.00,416.20,452.00,415.94C452.00,415.69,452.00,415.34,452.00,415.17C452.00,415.00,452.00,414.69,452.00,414.48C452.00,414.27,451.93,413.96,451.85,413.79C451.76,413.62,451.59,413.38,451.46,413.25C451.34,413.12,451.13,412.88,451.00,412.71C450.87,412.54,450.70,412.33,450.62,412.25C450.53,412.16,450.33,412.06,450.16,412.02C449.99,411.98,449.75,411.94,449.62,411.94C449.49,411.94,449.25,411.91,449.08,411.86C448.91,411.82,448.56,411.79,448.31,411.79C448.05,411.79,447.71,411.79,447.54,411.79C447.37,411.79,447.06,411.79,446.85,411.79C446.64,411.79,446.36,411.79,446.23,411.79C446.11,411.79,445.93,411.79,445.85,411.79C445.76,411.79,445.63,411.72,445.54,411.63C445.46,411.55,445.18,411.82,444.93,412.25Z"/>
<path class="nucleolus" onclick="changeStyle('path.nucleolus', 'fill', '#00FF99')"
d="M447.97,458.99C447.97,453.73,452.02,449.47,457.02,449.47C462.02,449.47,466.07,453.73,466.07,458.99C466.07,464.24,462.02,468.50,457.02,468.50C452.02,468.50,447.97,464.24,447.97,458.99Z"/>
<path class="nucleolus" onclick="changeStyle('path.nucleolus', 'fill', '#00FF99')"
d="M435.32,500.03C435.32,496.49,437.87,493.63,441.02,493.63C444.17,493.63,446.72,496.49,446.72,500.03C446.72,503.56,444.17,506.42,441.02,506.42C437.87,506.42,435.32,503.56,435.32,500.03Z"/>
<path class="cellinclusion"
onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M458.52,604.99C458.52,601.43,461.47,598.55,465.10,598.55C468.74,598.55,471.69,601.43,471.69,604.99C471.69,608.54,468.74,611.42,465.10,611.42C461.47,611.42,458.52,608.54,458.52,604.99Z"/>
<path class="cellinclusion"
onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M508.57,594.40C508.57,591.43,510.79,589.03,513.53,589.03C516.28,589.03,518.50,591.43,518.50,594.40C518.50,597.36,516.28,599.76,513.53,599.76C510.79,599.76,508.57,597.36,508.57,594.40Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M427.00,622.87C427.00,620.32,429.29,618.26,432.10,618.26C434.92,618.26,437.21,620.32,437.21,622.87C437.21,625.42,434.92,627.48,432.10,627.48C429.29,627.48,427.00,625.42,427.00,622.87Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M454.63,631.90C454.63,629.65,456.65,627.82,459.14,627.82C461.63,627.82,463.64,629.65,463.64,631.90C463.64,634.16,461.63,635.98,459.14,635.98C456.65,635.98,454.63,634.16,454.63,631.90Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M443.01,584.42C443.01,582.16,445.03,580.34,447.51,580.34C450.00,580.34,452.02,582.16,452.02,584.42C452.02,586.67,450.00,588.50,447.51,588.50C445.03,588.50,443.01,586.67,443.01,584.42Z"/>
<path class="cellinclusion"
onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M473.03,587.22C473.03,584.97,475.05,583.14,477.54,583.14C480.02,583.14,482.04,584.97,482.04,587.22C482.04,589.48,480.02,591.31,477.54,591.31C475.05,591.31,473.03,589.48,473.03,587.22Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M436.10,599.71C436.10,597.46,438.12,595.63,440.61,595.63C443.09,595.63,445.11,597.46,445.11,599.71C445.11,601.96,443.09,603.79,440.61,603.79C438.12,603.79,436.10,601.96,436.10,599.71Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M531.50,571.28C531.50,569.61,532.86,568.26,534.54,568.26C536.22,568.26,537.59,569.61,537.59,571.28C537.59,572.95,536.22,574.30,534.54,574.30C532.86,574.30,531.50,572.95,531.50,571.28Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M493.89,584.52C493.89,582.85,495.25,581.50,496.93,581.50C498.61,581.50,499.98,582.85,499.98,584.52C499.98,586.19,498.61,587.54,496.93,587.54C495.25,587.54,493.89,586.19,493.89,584.52Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M489.11,597.85C489.11,596.18,490.47,594.83,492.15,594.83C493.83,594.83,495.19,596.18,495.19,597.85C495.19,599.52,493.83,600.87,492.15,600.87C490.47,600.87,489.11,599.52,489.11,597.85Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M480.34,614.52C480.34,612.85,481.70,611.50,483.38,611.50C485.06,611.50,486.43,612.85,486.43,614.52C486.43,616.19,485.06,617.54,483.38,617.54C481.70,617.54,480.34,616.19,480.34,614.52Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M453.77,617.51C453.77,615.84,455.13,614.49,456.81,614.49C458.49,614.49,459.86,615.84,459.86,617.51C459.86,619.18,458.49,620.53,456.81,620.53C455.13,620.53,453.77,619.18,453.77,617.51Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M475.02,629.73C475.02,628.07,476.39,626.71,478.07,626.71C479.75,626.71,481.11,628.07,481.11,629.73C481.11,631.40,479.75,632.75,478.07,632.75C476.39,632.75,475.02,631.40,475.02,629.73Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M531.50,589.88C531.50,588.21,532.86,586.86,534.54,586.86C536.22,586.86,537.59,588.21,537.59,589.88C537.59,591.55,536.22,592.90,534.54,592.90C532.86,592.90,531.50,591.55,531.50,589.88Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M514.08,578.46C514.08,576.79,515.44,575.44,517.12,575.44C518.80,575.44,520.17,576.79,520.17,578.46C520.17,580.12,518.80,581.47,517.12,581.47C515.44,581.47,514.08,580.12,514.08,578.46Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M497.34,607.68C497.34,606.01,498.70,604.66,500.39,604.66C502.07,604.66,503.43,606.01,503.43,607.68C503.43,609.35,502.07,610.70,500.39,610.70C498.70,610.70,497.34,609.35,497.34,607.68Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M443.67,625.22C443.67,624.28,444.56,623.53,445.65,623.53C446.75,623.53,447.63,624.28,447.63,625.22C447.63,626.15,446.75,626.91,445.65,626.91C444.56,626.91,443.67,626.15,443.67,625.22Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M457.75,588.55C457.75,587.62,458.64,586.86,459.74,586.86C460.83,586.86,461.72,587.62,461.72,588.55C461.72,589.49,460.83,590.24,459.74,590.24C458.64,590.24,457.75,589.49,457.75,588.55Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M434.54,613.19C434.54,612.26,435.42,611.50,436.52,611.50C437.61,611.50,438.50,612.26,438.50,613.19C438.50,614.13,437.61,614.88,436.52,614.88C435.42,614.88,434.54,614.13,434.54,613.19Z"/>
<path
class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"d="M464.13,582.44C464.13,581.51,465.02,580.75,466.11,580.75C467.21,580.75,468.09,581.51,468.09,582.44C468.09,583.37,467.21,584.13,466.11,584.13C465.02,584.13,464.13,583.37,464.13,582.44Z"/>
<path class="cellinclusion" onclick="changeStyle('path.cellinclusion', 'fill', '#FF00FF')"
d="M414.54,618.31C414.54,617.37,415.42,616.62,416.52,616.62C417.61,616.62,418.50,617.37,418.50,618.31C418.50,619.24,417.61,620.00,416.52,620.00C415.42,620.00,414.54,619.24,414.54,618.31Z"/>
</svg>
</body>
</html>