Placing Image on Image Map

[kittrellbj]

Alright.   Allow me to explain a bit about what I'm trying to do and see if anyone has any tips on how to proceed from this point.  Search engines, unfortunately, have difficulty finding things unless you know the terminology sometimes.

 

Alright, I am in the process of designing a strategy game.  This game has a pre-generated map that is turned into an image map, so players can click on an area of the map and go straight to that unit, base, or item.

 

What I am trying to do is add icons/markings on the map to display information, such as checking the coordinates in the database, seeing if the current player owns this base or unit, and placing an icon around those coordinates, such as a crosshairs or a "selected" icon around it.

 

I have seen very little on this other than it probably is more efficiently accomplished outside the GD library.  I've seen someone talking about using CSS to do this, but I am not positive how to make PHP generate the CSS for it, and I've heard of a way to do it in Flash, but that doesn't help me much.  Any help would be greatly appreciated, as always.

[Floydian]

well, with javascript, you could intercept the clicks, and get a range object for the <AREA> tag they clicked on.

 

then you would use that range to calculate where to place your image. it's not the easiest thing to do

 

I would use a javascript library to make getting and using a range object easier and placing an image easier as well.

 

I use the Yahoo YUI library for these things

[kittrellbj]

Well, I'm not sure if it helps (much), but the points are always static.  I really just need a way to display the images at set coordinates over a image background where the coordinates are pulled from the database and generates either a CSS or image map/file with the icons over the map.

[Floydian]

there's a lot of variables involved here

 

you are using an image map, so this will require a relatively positioned or absolutely positioned image. that means you will need to use css for this.

 

is your page a fluid 100% width, fixed width left/center/right?

 

if your page is fixed with and aligned to the left or right, an absolutely positioned image would be fine

otherwise you're prolly going to need a relatively placed image

 

you could have an array with the coordinates you need for this

[kittrellbj]

No, it lies inside of a layout that I've designed, so it's not necessarily in an absolute-fixed location on the page.  And, I need to design for different browsers and resolutions, as my page does display different in IE vs. Firefox and at different resolutions.

 

Since the image map will be filled with the coordinates of where the images' centers are (for links to each location in the map), how could this be madeto work for placing an image on the image at these coordinates?

[Floydian]

My point about the image map and the relative/absolute positioning is this:

 

Using an image map means you have the space where the image map is filled up with an image. It's not a background image where you can just put another element inside it. Therefore, to overlay an image on top of your image map requires either relative or absolute css positioning of the overlay.

 

 

The way to figure out where to place the overlay, you need to do what I said in my first post. Get a range object of the area tag clicked on...

[kittrellbj]

Just to ensure we are on the same page with all of this, I will add some example information below.

 

Let's take the strategy map for instance (in ASCII):

 

__________________________________________

| . . . . . . . . . . . . . . . * . . . . . . . . . . . . . . . |

| . . . . . . . . . . . . . . . * . . . . . . . . . . . . . . . |

| . . . . . * . . . . . . . . . . . . . . . . . . . . . . . . . |

| . * . . . . . . . . . . . . . . . . . . . . . . . . . . . . . |

------------------------------------------------

 

Ok, so the map is there with 4 points (*'s) that are absolutely a part of the game map.  The .'s are just spacers and have no value or use.

 

Now, when a player builds a base on a *, I am going to be adding an image around that * when they load the map (so they can see their possessions).  So, let's say the player takes over the top *.  The map displayed would become something like this when he loads the page up:

 

__________________________________________

| . . . . . . . . . . . . . . .[*]. . . . . . . . . . . . . . . |

| . . . . . . . . . . . . . . . * . . . . . . . . . . . . . . . |

| . . . . . * . . . . . . . . . . . . . . . . . . . . . . . . . |

| . * . . . . . . . . . . . . . . . . . . . . . . . . . . . . . |

------------------------------------------------

 

It is encased by brackets, highlighting it and making the player say "Oh, yeah, I have a base built there!"

 

I'm not exactly sure why I'd need to capture their clicks when everything is drawn from the database before the content is displayed to the user.

 

I'm just trying to figure out, really, how to generate this onto a map (preferably using CSS, it seems simplest).  I suppose it would be a relative positioning based on a parent object, if that's possible.  i.e.  Wherever the parent object is, apply these coordinates to the child object and place it on the map.

 

I suppose I could get the coordinates of where the image map starts on the page by loading it up and just adding those coordinates to the child objects for an absolute-page display, but it could get messy that way.

[kittrellbj]

For some reason, I can't modify my post, so I will have to fix it here.  The ]'s turned it into a bbcode, so here's what I am actually trying to do:

 

__________________________________________

| . . . . . . . . . . . . . . .|*|. . . . . . . . . . . . . . . |

| . . . . . . . . . . . . . . . * . . . . . . . . . . . . . . . |

| . . . . . * . . . . . . . . . . . . . . . . . . . . . . . . . |

| . * . . . . . . . . . . . . . . . . . . . . . . . . . . . . . |

------------------------------------------------

 

(Added pipes around the effected "base")

[Floydian]

The reason I suggested the click deal was because the user would have to click the image map to move there. So the region they clicked is the one that's of interest.

 

You could alternatively mark that <area> tag with a unique id which your javascript could pick out, and then get the position of that <area> tag. Using that position information, you would then be able to calculate where to place your overlay.

 

From what you've told me, there is no way to predict where the "unit, base, or item" of interest is on any given user's browser page.

 

So, you have to render the page first, and then use javascript to find out where on the page that "unit, base, or item" is. Then place your overlay there.

 

That's how I'd do it. I'm sure there's other ways, like rendering your map using a second unit/base/item image that has the cross hair you want. But if you are going to dynamically place one on top of the image map, javascript and css is the way, and getting the position info is how you do that. Using a region object and a javascript library would make it relatively easy to do.

[kittrellbj]

Well, the values are pulled from the database of who owns what coordinates.  So, in the database, where the user's id matches the location, those values are pulled into an array and are used to place the highlights on the map.

 

It's definitely not real-time imaging; to move anything they fill out a form and hit submit, then it sends that data to the database and stores it, then it can draw things on the map after it pulls them back from the database as needed.

 

Sorry for not clarifying that.  It's a database-based strategy massively online game.

[kittrellbj]

Again, can't modify, but I found a resource that may be of some assistance in this matter.  It's just a matter of making it work with images.

 

The resource link is http://www.positioniseverything.net/abs_relbugs.html.  (Placing it here as much to help others as to help myself if I lose it on accident)