Placing an image, relatively

[Callan S.]

I'm trying out placing an image over others and am messing around with this code

Code: Select all

<?php

echo "<br><br><br><style type='text/css'>
.imgA1 { position:relative; top: 100px; left: 100px; z-index: 3; }
</style>";

echo "<table border='1'>
<tr>
<td>
<img class=imgA1 src='circle.png'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><br>
    <img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><br>
    <img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><br>
    <img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><br>
    <img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><img src='grasstile.jpg'><br>
    </td>
</tr>";

?>

Now with it, it seems to place the circle.png graphic at just the spot I want to. But for some reason the first row of grasstile.jpg have a big empty space at the start, one tile in size (50 pixels), then five grasstiles after it. It's like the circle.png has sort of taken up a space there, yet it's blank there, but been drawn in the right spot.

My question is, what do women want?

(heh, no, non sequeter! I'm trying to figure out why that row is out of sync?)

[kaos78414]

Try adding position:absolute; to the table that's holding the images. Maybe that'll do it

[Callan S.]

Thanks, but no luck.

One work around is to simply put a <br> on the end and then put the thing I want to put on top an extra 50 pixels down. But it still seems stupid.

[Jackolantern]

You know what I did for my tiled backgrounds in my map editor application, is that I simply made a div with an id, and styled it to have "position: relative;", and to give it a set width and height which is calculated by the number of cells across and high, times the height of my square tile image. So if you want a 15 x 8 map, and your tile image is 48x48px, then your div would be 720x384. It also means you would need 120 total cells. What you could then do is set up a FOR loop in PHP to create 120 <img> tags inside your enclosing div, each with an id of "backgroundtile".$x to create unique IDs, and a class of "tileclass" or something like that. Both the ID and the class are just for handling game events and further styling, respectively, since they will all align correctly due to the calculations done when figuring the size of the div. It may be easier to set them up that way instead of using a table cell.

EDIT: Actually, not sure if this is what you are looking for. You mention putting images over other images. What effect are you going for?

[Callan S.]

Basically I want to show a five by five map of the game world, and show a circle or something overlayed on the center square to show that's where the player is (because sometimes it might seem a bit unclear - this isn't exactly vital, but I think it'd be nice).

Drawing them all in by co-ordinates instead of just drawing them and leaving it up to the browser to space them, might be what I resort to in the end.

Oh, and in latter games I might want to draw characters with various different bits of gear on them, by overlaying the gear onto the body image. But right now I just want to put a circle in the middle of the map view.

[Jackolantern]

Out of curiosity, do you mean an animated map, or a placeholder on a map? If it is the former, I have a script that may help you out.

[Callan S.]

Currently a static map, ie it changes only with a refresh. The map consists of squares, all of which are a read out from the database into graphical form (if it helps to describe it).

It's just baffling that for some reason it has to print the space of the graphic to screen when I'm drawing it somewhere else. I can't imagine what use it is to let it do that.

It looks like

Code: Select all

_#####
#####
##O##
#####
#####

With the underscore being the blank space (the spot in the html I go to draw the 'O'). The 'O' is otherwise working, being a PNG that overlays onto the graphic below just as I want it.

[Jackolantern]

Thats strange. I made an extra test page to recreate the maps made with my editor, and didn't have any problem with spaces around tiles. Maybe the code in it could help you out? The database-to-map recreation page is in "mapshow.php".

[Callan S.]

Thanks Jack,

I'm looking at

Code: Select all

echo "<img id=\"prop".$b."\" class=\"props\" style=\"position: absolute; top: ".$mapData[$yOffset]."; left: ".$mapData[$xOffset].";\" src=\"../images/".$mapData[$nameOffset]."\" />";

And I can't say I understand it, even at a syntax level. Like it echos

Code: Select all

"<img id=\

but then appears to close the talking marks and write prop, then open the talking marks...yet then it's using the full stops to add the $b in??? I is not get dis?? I'm not even grasping the syntax! lol

Edit: And looking over here, at Iamlost's answer, it seems the browser wont account for the move and still treats the graphic as if it was in it's original flow position. How crappy is that?

I'm trying out laying them all out and in an absolute sense I can place them all with co-ordinates then the marker on top (which has to be drawn after, despite the whol z-index thing). But absolute...jeez, it wont work out as, AFAICT, works from the browser top left corner, and if I have a game designed for one size of screen on a larger size...etc etc.

Every time you get the boulder nearly to the top of the hill....

[Jackolantern]

That one is needlessly ugly, I admit. I should have echo'd it with single-quotes instead. What I am doing is escaping the double-quotes.

This breaks the string, and causes a syntax error:

Code: Select all

 echo "And then he said "His eye popping out made me trust him even less" in a hushed voice";

However, we can escape the quotes we want to actually display:

Code: Select all

 echo "And then he said \"His eye popping out made me trust him even less\" in a hushed voice";

Using \" simply tells the parser to actually display the character, and not take it as code. If I had echo'd with a single-quote, I could have used the double-quotes without the need to escape them.

To break it down, what that code does is start an img tag, then use the loop counter to make an ID like "prop3" or "prop19" (it escapes the first " to actually write it in the HTML, and then exits the string and concatenates it to the $b loop counter with the periods, and then re-enters the string and immediately escapes another " to end the HTML ID value). It then gives it a static class by escaping enclosing double-quotes. That is basically the formula for the rest of the statement: escaped double-quotes are used to actually write the double-quotes to the page and delimit the HTML values, as well as the in-line CSS code, while non-escaped double quotes are used to exit the string to concatenate in variable values.