icon_kid - 3:26 am on Oct 22, 2013 (gmt 0)
Had a bad weekend and didn't have the extended time I would need to test and document the suggestions offered. Instead, I made an animation that simulates exactly how my finished project would look and function -- because I'm an animator by trade, and beause it was fun to do (wish making it work like that in a Web page was as much fun, though). If a picture is worth a thousand words, then an animation is worth what -- 2000? I've sent a PM to certain members with the link to the simulation video for their reference.
It's obvious what's happening in the animation, but a description should be provided out of general principle:
* There's a column on the left with the names of doctors offices and their locations.
-- each name has a check box and a unique icon next to it.
* There's a much wider column on the right which has a "street map" background on it, and both columns are scrollable.
* When the check box for a particular doctor is clicked, another icon (which is identical to the one next to that doctor's name) appears at his geographic location on the map. If you uncheck his box, then his icon disappears from the map.
* Even though the icon next to a doctor's name and the one that appears on the map are identical, they are two separate files and don't have anything else to do with each other except for the user to associate them visually. The icon that appears on the map, however, is involved in an image swap. When the page loads all images are set to load their 'invisable' versions first -- that's why you don't see any icons when the page loads -- they are there -- you're just looking at invisable pictures. When you click a check box you're swapping an invisable image for one you can see.
I already have the code that makes most of this work. The stumbling block is unwanted spaces between rows of images. Perhaps eliminating the NOBR tags (as Fotiman has suggested) may solve that problem -- even though using thousands of place holders for positioning images is awkward, cumbersome and claimed to be dispensable by using CSS "position" attributes for only the few images that need to be seen (or swapped).
I'm not going backwards from here. I have the swap script and the DIV/TABlE layout -- which will stay as aspects of the final document. Now I have two ways of proceeding:
Either I eliminate unwanted spaces between rows of images (even though that version of my code involves thousands of "place hold" images as well),
I dispense with place holders altogether -- by precisely positioning just the icons I need to have on my map while also having the CSS script for positioning being integrated with/compatable with my "DIV, TABLE layout" and my image swap script.
Something as simple as what the animation shows MUST involve just as simple a programming scheme for constructing it as a functioning Web document.