html
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
<!--
Created by 'ChessMaster'
Credits to 'The Coding Sloth' for image enlarging idea
-->
<!DOCTYPE html>
<html>
<head>
<title>Bohr Atom models</title>
</head>
<body>
<svg class="g">
<circle cx="145" cy="145" r="90" fill="white"
style="stroke:#ccc; stroke-width:5px;"></circle>
</svg>
<div id="0" style="visibility:visible;">
<img id="image" src="http://i3.cpcache.com/product/709492490/elements_1_hydrogen_square_sticker_3_x_3.jpg"
alt="H"/>
<svg class="g">
<circle cx="145" cy="145" r="20" fill="blue"
style="stroke:black; stroke-width:2px;"></circle>
</svg>
<div class="text">
Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of circa 1.008, hydrogen is the lightest element on the periodic table. Its monatomic form (H) is the most abundant chemical substance in the Universe, constituting roughly 75% of all baryonic mass. Non-remnant stars are mainly composed of hydrogen in the plasma state. The most common isotope of hydrogen, termed protium (name rarely used, symbol 1H), has one proton and no neutrons.</div>
<div id="core">
<div class="ele">
</div></div></div>
Enter to Rename, Shift+Enter to Preview
css
css
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
*:focus {
outline:none;
}
#info {
position:absolute;
top:320px;
left:70px;
width:57.5px;
height:25px;
border-radius:10px;
}
.text {
position:absolute;
top:415px;
width:90%;
left:-60px;
}
#click {
position:absolute;
font-size:5px;
top:310px;
left:86.5px
}
#infotab {
Enter to Rename, Shift+Enter to Preview
js
js
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
var current = 0, max = 9, i = 0;
onload = function() {
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
images[i].addEventListener("click", function() {enlarge(this)});
}
}
function enlarge(image) {
if(image.className == "enlarge")
image.className = "downscale";
else
image.className = "enlarge";
}
function left() {
document.getElementById(current).style.visibility = "hidden";
if(current <= 0)
current = max;
else
current--;
document.getElementById(current).style.visibility ="visible";
document.getElementById("electron").innerHTML = current + 1;
document.getElementById("proton").innerHTML = current + 1;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run