"Layering" of images - can I do this? 1

[LEICJDN1]

Hello,

Need to see if my idea is feasible, hopefully before I start the work proper and then find it cannot be done!

Basically I have a large number of scanned images which I am adding to my site. They are ECGs - heart beat tracings, which are basically a set of 12 wiggly lines on a background standard grid.

Now, to make life easier, and perhaps quicker, I wonder if it is feasible to display the background image - which is the same for all - then precisely position 12 transparent images in the correct place over the background to give the appearance of the overall ECG.

If I can do this then it will mean I can populate each ECG with the relevant images from a database via ASP and also save on loading times and room taken up on the server.

So, my question is how? Any examples available?

Thanks.

JDN

 

[TheConeHead]

you could just hard code in your bg image into a table or whatever then put each "floating" image into it's own div (position:absolute) then position it how you wish and control it's visibility how you wish...

 

[ecobb]

I've never tried it, but I know that Dreamweaver MX has some layering capabilities. You may want to check it out.

Hope This Helps!

Ecobb
- I hate computers!

 

[wiser3]

I've done some similar things.

Ecobb mentioned that Dreamweaver can make html pages with text/images in layers, GoLive also does this very well and calls them floating boxes. Of course these programs turn out standard html and css that can be hand coded.

-----

First set your background image as the background for the page or table or wherever you want it. Then you need to position each image on top of it.

Here's the html i use for the image. In this case the image is also a link. You can place this anywhere inside the body of the html. I usually put them first, before any text or other content.

< div id=&quot;mainlogo&quot;>
< a href=&quot;index.html&quot;>
< img src=&quot;images/logos/jsna_logo.gif&quot; alt=&quot;&quot; height=&quot;57&quot; width=&quot;375&quot; border=&quot;0&quot;>
< /a>
< /div>

The important thing here is the id name on the div element. We will reference that in the css to position it.

Then as part of the css (i always put my css in an external file, but inline or in the header works fine) make an id selector to position the image. Here's the css line for the above image.

#mainlogo { position: absolute; z-index: 500; top: 16px; left: 0px; width: 375px; height: 57px; visibility: visible; display: block }

There are other options for the position attribute, but absolute is the easiest to work with.

The z-index sets the layers height. For example a z-index of 500 will appear on top of a z-index of 300.

Then we give the coordinates for upper left corner of the layer. (16 x 0)

Next is the size of the layer. (375 x 57)

The last two attributes you can add in but may not need. I include them becasue i often write some JavaScripts that makes different layers appear/disappear/move as the user mouses over or clicks things.

Simply do this for each layer. You will probably have to adjust the position of each layer a few times to get them exactly where you want them.

 

[LEICJDN1]

Excellent. Familiar with CSS so will have a crack at that.

Cheers.

JDN