开发者

Displaying tiled and overlapping images

I'm trying to make a simple browser game without relying on anyt开发者_如何学Ching fancy like flash or html5. I was doing pretty well in getting everything set up, but when I got to the ground I ran into trouble as I'm not very good at setting up html pages. I want to have a tiled ground that I can put objects on, then click on the objects to take the user to another page. I'm not sure how to go about something like this and am looking for some direction.

I have a fairly good grasp on PHP, understand basic html, very limited css and am starting to learn javascript and am planning on picking up jQuery.


I don't really understand what you want, but this might help:

Live Demo

To understand how the positioning works, see:

  • 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
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜