CSS BG

PHP で CSS(Cascading Style Sheets) を使って BG(背景画像)を表示します。

次のリンクをクリックするとサーバーにアップロードした BG(背景画像)を表示するプログラムが呼び出されます。
Google Chrome では一部 CSS が動かないようです。
私は Internet Explorer 11 で実行を確認しました。
BG(Back Ground) MAP

プログラムの説明

  1. CSS(Cascading Style Sheets) を使って BG(背景画像)を表示します。
    CSS の説明は CSS Before を参照して下さい。
  2. このプログラムでは、次のファイルを使用しています。
  3. bg_3.php 「BG(Back Ground) MAP」の全ソースコードです。
    プログラムは Javascript の Map を配列で定義 と同じで、拡張子を .html から .php に変更しただけです。
    <html>
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="javas.css" type="text/css">
      <title>BG MAP</title>
    </head>
    
    <body>
    <script src="javas.js"></script>
    </body>
    </html> 
    
  4. 画像を切り分けてマップチップを定義した javas.css(Cascading Style Sheets)です。
    @import url("javascript.css");
    
    #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;}
    
  5. javas.css を並べて BG(背景画像)を表示する javas.js(JavaScript の命令を記述)です。
    var map が背景画像を構成するマップチップの並びです。
    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 class="info">BG(Back Ground) MAP<br></div>');
    document.write('<div id="bg">');
    for(i=0; i<map.length; i++)
    { document.write('<div class="chip c', map[i], '"></div>'); }
    document.write('</div>');
    

前田稔の超初心者のプログラム入門
PHP Program