multiple boxes, dynamic content

[erobey]

Well, I don't know how to begin doing this. This is what I want to do:

I have an image that is the background of a web page. The image is a collage of many images of varying sizes. I want to create divs that are positioned over the various images, (that part I can do easily) which will display one at a time with the options for automatically 'popping' after a set time and/or user keyed by clicking a link. There would be four of these div/boxes which would then alternate periodically, taking the viewer from place to place on the page as the content flows from box to box,alternately revealing and hiding parts of the collage. Any suggestions would be welcome. I am a total newb at coding

Thanks in advance

[djr33]

I am a total newb at coding

What you're describing is complicated. It seems possible, but if this really is one of your first projects, then you might want to look at doing it in a simpler way. If you want to go ahead and do it exactly as you describe, that's fine, but just be patient and take it step by step. You're describing a very creative page, so I don't have any specific advice, just to figure out all the details then look into exactly what code would allow that specific detail; and in the end figure out how to put it all together. Trying to do it all at once is inefficient and an easy way to fail.


Some simpler suggestions, in case these help:

1. Use an image map. This chops up the image (effectively, not literally) into sections called "areas"; each area then can be used as a link, or with Javascript to make things happen. It's a somewhat dated technique, but for what you're describing it's a good thing to consider. It works well and it's not very hard. Look for some freeware to make the maps if you don't want to code all the numbers by hand (that's possible, just slow to figure out all the math for the coordinates).

2. Look into "balloons" and "tooltips" to see if you could get away with something that attaches to the cursor rather than the image. Or at set coordinates rather than in these divs.

3. As an alternative, look into Flash. It's the best way to do this if you want complete control over the graphics. It's complicated and yet another thing to learn, and it's not necessary if you can use Javascript, but it's much more powerful than anything JS/html/css can offer for advanced (moving/precise) graphics. I'm not sure that would be all that much easier (probably a little, actually, once you understand how to use Flash), but it would give you more control.


Finally, everything you've described sounds generally fine. Aside from the level of difficulty, the only major problem that comes to mind is having such a complex layout. It could make the page load slowly or not behave very well on slower computers and it would also make debugging any cross-browser sizing/layout issues very difficult. If you can find a way, try to avoid creating so many divs on the page (or any "extra" elements at all, actually).