125 lines
5.3 KiB
HTML
125 lines
5.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
.node {
|
||
|
|
position: absolute;
|
||
|
|
width: 64px;
|
||
|
|
font-family: Lucida Grande;
|
||
|
|
font-size: 9px;
|
||
|
|
text-align: center;
|
||
|
|
-webkit-border-radius: 4px;
|
||
|
|
}
|
||
|
|
.red {
|
||
|
|
background: rgba(255, 0, 0, 0.9);
|
||
|
|
}
|
||
|
|
.orange_dark {
|
||
|
|
background: rgba(255, 80, 0, 0.9);
|
||
|
|
}
|
||
|
|
.orange_light {
|
||
|
|
background: rgba(255, 160, 0, 0.9);
|
||
|
|
}
|
||
|
|
.yellow {
|
||
|
|
background: rgba(255, 240, 0, 0.9);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
var $body = $("body");
|
||
|
|
$.getJSON("../json/dictionary.json", function(data) {
|
||
|
|
addNode("zeus", 512, 256);
|
||
|
|
var zeus = [
|
||
|
|
[
|
||
|
|
"pandora", "prometheus",
|
||
|
|
"poseidon", "cronus", "rhea", "hera", "ixion",
|
||
|
|
"persephone", "tantalus",
|
||
|
|
"leto", "apollo", "artemis",
|
||
|
|
"dioscuri", "leda", "helen", "aphrodite",
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"", "hercules",
|
||
|
|
"uranus", "gaia", "demeter", "hades",
|
||
|
|
"tartarus", "pelops",
|
||
|
|
"niobe", "cassandra", "iphigenia",
|
||
|
|
"castor", "pollux", "clytemnestra", "menelaus", "paris", "dione"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"", "", "",
|
||
|
|
"chaos", "cybele",
|
||
|
|
"", "",
|
||
|
|
"", "priam", "hecuba", "orestes",
|
||
|
|
"aegisthus", "electra", "agamemnon", "atreus",
|
||
|
|
"achilles", "athena",
|
||
|
|
|
||
|
|
],
|
||
|
|
[
|
||
|
|
"", "",
|
||
|
|
"erebus", "nyx", "attis", "",
|
||
|
|
"", "","thyestes",
|
||
|
|
"cressida", "troilus", "hector",
|
||
|
|
"neoptolemus",
|
||
|
|
"andromache", "peleus", "thetis",
|
||
|
|
]
|
||
|
|
];
|
||
|
|
$.each(zeus, function(i, arr) {
|
||
|
|
$.each(arr, function(j, term) {
|
||
|
|
addNode(
|
||
|
|
term,
|
||
|
|
512 + Math.cos(j / 8 * Math.PI) * ($.inArray(j, [3, 5, 11, 13]) > -1 ? 80 + i * 48 : 64 + i * 48),
|
||
|
|
256 + Math.sin(j / 8 * Math.PI) * ($.inArray(j, [4, 12]) > -1 ? 72 + i * 36 : 64 + i * 32)
|
||
|
|
);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
var i = 0;
|
||
|
|
$.each(data, function(term, obj) {
|
||
|
|
if (term != "zeus" &&
|
||
|
|
$.inArray(term, zeus[0]) == -1 &&
|
||
|
|
$.inArray(term, zeus[1]) == -1 &&
|
||
|
|
$.inArray(term, zeus[2]) == -1 &&
|
||
|
|
$.inArray(term, zeus[3]) == -1
|
||
|
|
) {
|
||
|
|
addNode(term, 768, 16 + i * 16);
|
||
|
|
i++;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
function addNode(term, left, top) {
|
||
|
|
$("<div>")
|
||
|
|
.addClass("node")
|
||
|
|
.attr({
|
||
|
|
id: term
|
||
|
|
})
|
||
|
|
.css({
|
||
|
|
left: left + "px",
|
||
|
|
top: top + "px"
|
||
|
|
})
|
||
|
|
.html(term.substr(0, 1).toUpperCase() + term.substr(1))
|
||
|
|
.mouseenter(function() {
|
||
|
|
var d = data[term];
|
||
|
|
$("#" + term).addClass("red");
|
||
|
|
$.each(d.forward, function(i, term) {
|
||
|
|
$("#" + term).addClass("orange_light");
|
||
|
|
});
|
||
|
|
$.each(d.back, function(i, term) {
|
||
|
|
if ($("#" + term).hasClass("orange_light")) {
|
||
|
|
$("#" + term).removeClass("orange_light").addClass("orange_dark");
|
||
|
|
} else {
|
||
|
|
$("#" + term).addClass("yellow");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.mouseleave(function() {
|
||
|
|
$(".node")
|
||
|
|
.removeClass("red")
|
||
|
|
.removeClass("orange_dark")
|
||
|
|
.removeClass("orange_light")
|
||
|
|
.removeClass("yellow");
|
||
|
|
})
|
||
|
|
.appendTo($body);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body></body>
|
||
|
|
</html>
|