cacert-testmgr/external/ZendFramework-1.9.5/externals/dojo/demos/i18n/sprite.html
Markus Warg 8398c9048d initially import ZendFramework-1.9.5 into repository
code was modified slightly, so the code differs from the original downloadable 1.9.5 version
2010-03-31 10:12:32 +02:00

298 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>