icky

I'm sure we must have some pros around here who can answer this.

How would I go about creating a web page which loads an image and then overlays smaller images on top of the original in precise locations. This would be done entirely client-side.

I have little experience beyond basic html, but I have lots of coding experience. If you know where there might be a good example of such a thing, just point me there, and I'll figure it out.

Thanks!

(I may just do it in C++ if there's no magically easy way)

__________________
Peace through fear... since 1947!

icky

Ooo... I was just looking around and it looks like Flash might be an easy solution to this. I've always wanted to learn about Flash.

__________________
Peace through fear... since 1947!

Bommando

Do you mean you want to do this interactively so the user can drag stuff around?

If it needs to be done entirely client-side, then JavaScript is your cross-platform option. Flash would also be able to do it to a certain extent, but it's far from trivial and I am not certain about its ability to export your generated images.

This is the closest thing I could find that was a simple overlay / dragging tool:

Creating Online Image Editor.

If you view the HTML source, you'll see the JavaScript code in there.

icky

No, the user doesn't need to be able to drag stuff. I just need to overlay markers on a jpg. I already have a mostly functional C++ version working, but I'm still interested in javascript if there's an easy way.

__________________
Peace through fear... since 1947!

Cain

No need for any fancy scripts then. Use css to set 'background' and then 'position: absolute' for the overlay images. Just create the proper box-hierarchy with 'div' and you are set.

If you need content to display dynamically on mouse-over, you can use ':hover' with 'display' to the same effect.

Iceberg

CSS
Cascading Style Sheets, really easy stuff and very easily integrated into HTML.

www.w3schools.com for some basic tutorials.

__________________
It only takes 2 bites [insert parasite] to get to the center of a meatpop.
TGNS Admin | NS Forum Moderator Digz | NS Play Tester
Natural Selection | TGNS Primer | Communication Awareness!
Army Info:
AIT - 37F @ Fort Bragg, NC
Graduate AIT Oct 23rd.

icky

Thanks guys! This is very interesting. I can see how to place text, so if I can apply this to images, I will be well on my way. I can just write a litle parser to translate my data into HTML.

Edit: I see how to apply it to images

__________________
Peace through fear... since 1947!

shroompicker

Just know ahead of time, if you use the 'absolute' style, the image and the overlaid images are going to be about the only fancily formatted thing on the page. That is, you would be able to place paragraphs or other images on the page which simply flow after it, you're okay, but if you want to put this collage in a box, then place the box somewhere like a table, you're dead.

Also, be sure to test it on Firefox, Safari, and IE6 for Win (screw IE for Mac).

Just to let you know the limitations before you bang your head on the keyboard for sixteen hours like most of us end up doing when first trying this

__________________
-- Shroom
I tried smoking mushrooms once. Couldn't keep the pizza lit.

icky

Heh... thanks for the advice. I ended up tinkering with the CSS stuff for awhile, doing almost everything I wanted, then I moved on. Learned lots though.

I realized that if I was going to do my parsing in Python, I might as well just use it to edit the images at the same time. Then you can just display the processed images in a browser.

__________________
Peace through fear... since 1947!

shroompicker

<img src="imgBig.png" style="position: absolute; top: 100px; right: 100px;">

<img src="img1.png" style="position: absolute; top: 150px; right: 100px;">

<img src="img2.png" style="position: absolute; top: 100px; right: 150px;">

<img src="img3.png" style="position: absolute; top: 200px; right: 200px;">

__________________
-- Shroom
I tried smoking mushrooms once. Couldn't keep the pizza lit.

icky

Just out of curiousity, how might you make the background of the overlaid images transparent?

Nevermind, I got it.

__________________
Peace through fear... since 1947!

Cain

A good example of what can be done with css can be found here. All the different styles are done in css and the underlying html is unchanged. You can pick up a few neat tips and tricks as well as some inspiration for your own design.