0 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 |
8 | 3 | 3 | 3 | 3 | 9 |
1 | 5 | 0 | 0 | 5 | 2 |
1 | 0 | 5 | 0 | 0 | 2 |
6 | 4 | 4 | 4 | 4 | 7 |
@import url("javascript.css"); @charset "utf-8"; #map { width: 160px; height: 64px; } #bg { width: 192px; height: 128px; } .info { clear: both; padding: 10px 0; } .chip { float: left; width: 32px; height: 32px; background-image: url("javas.gif"); } .c0 {background-position: -0px -0px;} .c1 {background-position: -32px -0px;} .c2 {background-position: -64px -0px;} .c3 {background-position: -96px -0px;} .c4 {background-position: -128px -0px;} .c5 {background-position: -0px -32px;} .c6 {background-position: -32px -32px;} .c7 {background-position: -64px -32px;} .c8 {background-position: -96px -32px;} .c9 {background-position: -128px -32px;} |
<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8"> <link rel="stylesheet" href="javas.css" type="text/css"> </head> <body> <div id="bg"> <div class="chip c8"></div> <div class="chip c3"></div> <div class="chip c3"></div> <div class="chip c3"></div> <div class="chip c3"></div> <div class="chip c9"></div> <div class="chip c1"></div> <div class="chip c5"></div> <div class="chip c0"></div> <div class="chip c0"></div> <div class="chip c5"></div> <div class="chip c2"></div> <div class="chip c1"></div> <div class="chip c0"></div> <div class="chip c5"></div> <div class="chip c0"></div> <div class="chip c0"></div> <div class="chip c2"></div> <div class="chip c6"></div> <div class="chip c4"></div> <div class="chip c4"></div> <div class="chip c4"></div> <div class="chip c4"></div> <div class="chip c7"></div> </div> </body> </html> |
<link rel="stylesheet" href="javas.css" type="text/css"> |
@import url("javascript.css"); |
#bg { width: 192px; height: 128px; } |
<div class="chip c8"></div> <div class="chip c3"></div> ・ ・ ・ |
<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8"> <link rel="stylesheet" href="javas.css" type="text/css"> </head> <body> <script type="text/javascript"> var map = [ 8, 3, 3, 3, 3, 9, 1, 5, 0, 0, 5, 2, 1, 0, 5, 0, 0, 2, 6, 4, 4, 4, 4, 7 ]; document.write('<div id="bg">'); for(i=0; i<map.length; i++) { document.write('<div class="chip c', map[i], '"></div>'); } document.write('</div>'); </script> </body> </html> |
var map = [ 8, 3, 3, 3, 3, 9, 1, 5, 0, 0, 5, 2, 1, 0, 5, 0, 0, 2, 6, 4, 4, 4, 4, 7 ]; |
for(i=0; i<map.length; i++) { document.write('<div class="chip c', map[i], '"></div>'); } |
@import url("javascript.css"); |
<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8"> <link rel="stylesheet" href="javas.css" type="text/css"> </head> <body> <script src="javas.js"></script> </body> </html> |
ファイル名 | 説明 |
---|---|
bg_3.html | BG MAP を描画するプログラム |
javas.css | マップチップの分割情報が定義された CSS ファイル |
javas.js | BG の並び情報が定義された JavaScript ファイル |
javas.gif | 背景画像を構成するマップチップ画像ファイル |