You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
3.7 KiB
HTML
299 lines
3.7 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<script type="text/javascript" src="../../dojo/dojo.js"
|
|
djConfig="isDebug: true, parseOnLoad: true"></script>
|
|
<style>
|
|
img {
|
|
padding: 0;
|
|
border: 1px solid black;
|
|
margin: 3px;
|
|
}
|
|
</style>
|
|
<script>
|
|
// codes of countries
|
|
var codes = [
|
|
"ad",
|
|
"ae",
|
|
"af",
|
|
"ag",
|
|
"ai",
|
|
"al",
|
|
"am",
|
|
"an",
|
|
"ao",
|
|
"ar",
|
|
"as",
|
|
"at",
|
|
"au",
|
|
"aw",
|
|
"ax",
|
|
"az",
|
|
"ba",
|
|
"bb",
|
|
"bd",
|
|
"be",
|
|
"bf",
|
|
"bg",
|
|
"bh",
|
|
"bi",
|
|
"bj",
|
|
"bm",
|
|
"bn",
|
|
"bo",
|
|
"br",
|
|
"bs",
|
|
"bt",
|
|
"bv",
|
|
"bw",
|
|
"by",
|
|
"bz",
|
|
"ca",
|
|
"catalonia",
|
|
"cc",
|
|
"cd",
|
|
"cf",
|
|
"cg",
|
|
"ch",
|
|
"ci",
|
|
"ck",
|
|
"cl",
|
|
"cm",
|
|
"cn",
|
|
"co",
|
|
"cr",
|
|
"cs",
|
|
"cu",
|
|
"cv",
|
|
"cx",
|
|
"cy",
|
|
"cz",
|
|
"de",
|
|
"dj",
|
|
"dk",
|
|
"dm",
|
|
"do",
|
|
"dz",
|
|
"ec",
|
|
"ee",
|
|
"eg",
|
|
"eh",
|
|
"england",
|
|
"er",
|
|
"es",
|
|
"et",
|
|
"europeanunion",
|
|
"fam",
|
|
"fi",
|
|
"fj",
|
|
"fk",
|
|
"fm",
|
|
"fo",
|
|
"fr",
|
|
"ga",
|
|
"gb",
|
|
"gd",
|
|
"ge",
|
|
"gf",
|
|
"gh",
|
|
"gi",
|
|
"gl",
|
|
"gm",
|
|
"gn",
|
|
"gp",
|
|
"gq",
|
|
"gr",
|
|
"gs",
|
|
"gt",
|
|
"gu",
|
|
"gw",
|
|
"gy",
|
|
"hk",
|
|
"hm",
|
|
"hn",
|
|
"hr",
|
|
"ht",
|
|
"hu",
|
|
"id",
|
|
"ie",
|
|
"il",
|
|
"in",
|
|
"io",
|
|
"iq",
|
|
"ir",
|
|
"is",
|
|
"it",
|
|
"jm",
|
|
"jo",
|
|
"jp",
|
|
"ke",
|
|
"kg",
|
|
"kh",
|
|
"ki",
|
|
"km",
|
|
"kn",
|
|
"kp",
|
|
"kr",
|
|
"kw",
|
|
"ky",
|
|
"kz",
|
|
"la",
|
|
"lb",
|
|
"lc",
|
|
"li",
|
|
"lk",
|
|
"lr",
|
|
"ls",
|
|
"lt",
|
|
"lu",
|
|
"lv",
|
|
"ly",
|
|
"ma",
|
|
"mc",
|
|
"md",
|
|
"me",
|
|
"mg",
|
|
"mh",
|
|
"mk",
|
|
"ml",
|
|
"mm",
|
|
"mn",
|
|
"mo",
|
|
"mp",
|
|
"mq",
|
|
"mr",
|
|
"ms",
|
|
"mt",
|
|
"mu",
|
|
"mv",
|
|
"mw",
|
|
"mx",
|
|
"my",
|
|
"mz",
|
|
"na",
|
|
"nc",
|
|
"ne",
|
|
"nf",
|
|
"ng",
|
|
"ni",
|
|
"nl",
|
|
"no",
|
|
"np",
|
|
"nr",
|
|
"nu",
|
|
"nz",
|
|
"om",
|
|
"pa",
|
|
"pe",
|
|
"pf",
|
|
"pg",
|
|
"ph",
|
|
"pk",
|
|
"pl",
|
|
"pm",
|
|
"pn",
|
|
"pr",
|
|
"ps",
|
|
"pt",
|
|
"pw",
|
|
"py",
|
|
"qa",
|
|
"re",
|
|
"ro",
|
|
"rs",
|
|
"ru",
|
|
"rw",
|
|
"sa",
|
|
"sb",
|
|
"sc",
|
|
"scotland",
|
|
"sd",
|
|
"se",
|
|
"sg",
|
|
"sh",
|
|
"si",
|
|
"sj",
|
|
"sk",
|
|
"sl",
|
|
"sm",
|
|
"sn",
|
|
"so",
|
|
"sr",
|
|
"st",
|
|
"sv",
|
|
"sy",
|
|
"sz",
|
|
"tc",
|
|
"td",
|
|
"tf",
|
|
"tg",
|
|
"th",
|
|
"tj",
|
|
"tk",
|
|
"tl",
|
|
"tm",
|
|
"tn",
|
|
"to",
|
|
"tr",
|
|
"tt",
|
|
"tv",
|
|
"tw",
|
|
"tz",
|
|
"ua",
|
|
"ug",
|
|
"um",
|
|
"us",
|
|
"uy",
|
|
"uz",
|
|
"va",
|
|
"vc",
|
|
"ve",
|
|
"vg",
|
|
"vi",
|
|
"vn",
|
|
"vu",
|
|
"wales",
|
|
"wf",
|
|
"ws",
|
|
"ye",
|
|
"yt",
|
|
"za",
|
|
"zm",
|
|
"zw"
|
|
];
|
|
|
|
function generate(){
|
|
var sprite = dojo.byId("sprite"), css = dojo.byId("css");
|
|
var val = "";
|
|
dojo.forEach(codes, function(code, idx, total){
|
|
var img = document.createElement("img");
|
|
img.src = "png/"+ code + ".png";
|
|
sprite.appendChild(img);
|
|
var pos=dojo.coords(img), bb = dojo._getBorderBox(img);
|
|
val += [
|
|
".country" + code.toUpperCase() + "Icon {",
|
|
" background-position: " + -1*pos.l + "px " + -1*pos.t + "px;",
|
|
"}"].join("\n") + "\n";
|
|
if(idx%20==19){ sprite.appendChild(document.createElement("br")); }
|
|
});
|
|
css.value = ".countryIcon {\n\tbackground-image: url('images/flags.png');\n\theight: 13px !important;\n\twidth: 18px !important;\n}\n\n" + val;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Flag Sprite/CSS Generator</h1>
|
|
<button onclick="generate();">generate</button>
|
|
|
|
<h1>Sprite</h1>
|
|
<div style="border: 1px solid black; padding: 10px;">
|
|
<div style="position:relative" id="sprite"></div>
|
|
</div>
|
|
|
|
<h1>CSS</h1>
|
|
<textarea id="css" cols=100 rows=20 autocomplete=off>push generate to fill in</textarea>
|
|
|
|
</body>
|
|
</html>
|