タイル貼り画像とオーバーラップ画像を表示する

Question

私はフラッシュやhtml5のような派手なものに頼らずに簡単なブラウザゲームを作ろうとしています。私はすべてをセットアップするのにかなりうまくやっていましたが、私が地面に着くと、私はhtmlページを設定するのがあまりよくないので、困ったことに遭遇しました。私はオブジェクトを置くことができるタイル張りの地面を持っていたい、オブジェクトをクリックして別のページにユーザーを連れて行く。私はこのようなことについてどうやって行くべきか分かりませんし、ある方向を探しています。

私は基本的なHTML、非常に限られたCSSを理解し、JavaScriptを学ぶことを開始し、jQueryを拾うことを計画しています。

Answer 1

私は本当にあなたが望むものを理解していないが、これは役立つかもしれない：

Live Demo

参照、ポジショニングがどのように機能するかを理解するために：

• http://css-tricks.com/absolute-positioning-inside-relative-positioning/
• http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

HTML：

<div id="gameContainer"> 

    <a href="http://www.google.com/" class="wall" style="top:32px;left:64px"></a> 
    <a href="http://en.wikipedia.org/" class="wall" style="top:32px;left:96px"></a> 
    <a href="http://www.microsoft.com/" class="wall" style="top:32px;left:128px"></a> 
    <a href="http://www.google.com/" class="wall" style="top:32px;left:160px"></a> 

</div> 

CSS：

#gameContainer { 
    width: 320px; 
    height: 320px; 
    border: 1px solid #000; 
    background: url(http://i.stack.imgur.com/sFV9k.png); 
    position: relative 
} 

.wall { 
    background: url(http://i.stack.imgur.com/IFjyp.png); 
    width: 32px; 
    height: 32px; 
    position: absolute 
}