Img id/Div

[hallsofvallhalla]

Okay this has got me stumped.

I am defining a blank img in html as a placeholder using

Code: Select all

<img src=""  id="C1">

then i am pulling image names and locations using ajax from the DB every 2 second tick. It pulls all images in one request into one string. I then break up the string and use

Code: Select all

document.getElementById("C1").src="the image"
document.getElementById("C1").style.left= "the image left from database" + "px"

this works except for it accounts flow which i do not need it to do. So lets say i have 2 images

image 1 and 2 is located at 0 left and 0 top and is 20x20 in size
image 2 will end up at 20 left 0 top because image 1 pushes it over instead of stacking.

I have tried turning them into divs and using z index but when I change it to

Code: Select all

<div id="C1"><img src=""></div>

no pic shows up...what am i missing?

this is all pseudo code

[Chris]

position absolute?

What exactly is it supposed to do?

[Zyviel]

I dont know if this will help but i have overlayed a city onto grass image in grid positon 5 using this code:

<div id="grid1"><a> <img src="images/grass.png" onclick="submitForm('grid1')" width="110" height="110" border="0"/></a></div>

<div id="grid2"><a> <img src="images/grass.png" onclick="submitForm('grid2')" width="110" height="110" border="0"/></a></div>

<div id="grid3"><a> <img src="images/grass.png" onclick="submitForm('grid3')" width="110" height="110" border="0"/></a></div>

<div id="grid4"><a> <img src="images/grass.png" onclick="submitForm('grid4')" width="110" height="110" border="0"/></a></div>

<div id="grid5"><a> <img src="images/grass.png" onclick="submitForm('grid5')" width="110" height="110" border="0"/></a></div>

<div id="grid5"><a> <img src="images/town.png" width="50" height="50" border="0"/></a></div>

<div id="grid6"><a> <img src="images/grass.png" onclick="submitForm('grid6')" width="110" height="110" border="0"/></a></div>

<div id="grid7"><a> <img src="images/grass.png" onclick="submitForm('grid7')" width="110" height="110" border="0"/></a></div>

<div id="grid8"><a> <img src="images/grass.png" onclick="submitForm('grid8')" width="110" height="110" border="0"/></a></div>

<div id="grid9"><a> <img src="images/grass.png" onclick="submitForm('grid9')" width="110" height="110" border="0"/></a></div> <div id="gridmessage"><p> x = 4 y = 4 type = 1</p> </div>

This is the css code:

#grid1 {
position:absolute;
left:20px;
top:20px;
z-index:7;
}
#grid2 {
position:absolute;
left:130px;
top:20px;
z-index:7;
}
#grid3 {
position:absolute;
left:240px;
top:20px;
z-index:7;
}
#grid4 {
position:absolute;
left:20px;
top:130px;
z-index:7;
}
#grid5 {
position:absolute;
left:130px;
top:130px;
z-index:7;
}
#grid6 {
position:absolute;
left:240px;
top:130px;
z-index:7;
}
#grid7 {
position:absolute;
left:20px;
top:240px;
z-index:7;
}
#grid8 {
position:absolute;
left:130px;
top:240px;
z-index:7;
}
#grid9 {
position:absolute;
left:240px;
top:240px;
z-index:7;
}
#gridmessage {
position:absolute;
left:400px;
top:50px;
z-index:7;
}

[hallsofvallhalla]

i cannot use position absolute for it needs to be in the same spot for every player no matter screen size. The rest of my website is relative to screen size.

It is suppose to place other characters, trees, rocks, ect pulled form the database onto the map.


@Zyviel: I am not using a grid system, this is a dynamic travel system that uses pixel movement. With your grid what happens when you change your resolution? You are using absolute positioning which will get you in trouble. You need to look into float.


I know I can use screen width /40 blah blah but that is so untrustworthy

[PaxBritannia]

I haven't done much on dynamic travel, so I can't help much there.

What I did for my (grid) map was have a div with a fixed width and height and then just have a foreach loop pull each entry from the database, alter the href, and then place the image.

Pax.

[Chris]

You can put the images inside a div, then the images will have the margins of that div, not of the screen.

[hallsofvallhalla]

how is that? absolute is absolute and makes no care of the flow. Absolute 0,0 is the left top corner of the screen no matter what div they are in.

[Zyviel]

Halls,

I have limited knowledge of how to place images on a map and have based my off what you did in the Forsaken Sanctum turtorials. I agree that using absolute position will probably cause problems if people use a different screen resolution than I am using. I will try to reseach other methods of positioning images.

Do you have any tutorials on the float positioning you are currently using?

[hallsofvallhalla]

yes urban realms uses floats. If you notice in the FS tutorials the entire game is pushed to the left side of screen, that way no matter screen size it will always be located in the same spot. I am looking for a center method.

[Chris]

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>You are welcome</title>
</head>

<body>
<h1>No borders used here</h1>
<div style="width: 30px; height: 30px; background: #000; margin: auto;">

	<div style="margin: 5px; height: 20px; position: absolute; width: 20px; background: #FFF;">
    </div>
    <div style="margin-top: 6px; margin-left: 6px; position: absolute; height: 18px; width: 18px; background: #F00;">
    </div>

</div>

</body>
</html>

Now read the title.