So here you go... a "picture in a picture" method.
A CSS framed picture
And a "hidden" "picture in a picture" method.
A "hidden" CSS framed picture
Sort of a way to 'hide the picture and let the user decide if they want to actually see the image. All it does is use positioning for placing the image down and to the right about the width/height of the iframe outline. Margins top and left would likely work as well.
This demonstration uses position:absolute to present them on the demo pages, but the 'frame' can be placed using any of the various positioning techniques in CSS. Or probably Tables, too.
Enjoy.
( ps: this picture is from a Memorial service for one of the Timber Framers Guild Members who was active in building the Timber Framed Bridge in the picture... )
And here is the CSS for the placement of the "mid" div (the picture) and the "outer" div (the basic frame). Adjust the positioning and/or sizes to suit.
CODE
#mid {
position:absolute;
top: 0px; /* or the height of the 'frame' to hide the picture */
left: 0px; /* or the width of the 'frame' to hide the picture */
background-color: #eeeeee;
margin: 0px;
padding: 0px;
}
#outer {
position:absolute;
top: 80px; /* or whatever you need to position the 'frame' */
left: 80px; /* or whatever -- ditto -- */
width: 200px; /* the width of the 'frame' */
height: 200px; /* the height of the 'frame' */
background-color: #eeeeee;
margin: 100px;
overflow: auto;
border: 5px solid #99cc99;
}
position:absolute;
top: 0px; /* or the height of the 'frame' to hide the picture */
left: 0px; /* or the width of the 'frame' to hide the picture */
background-color: #eeeeee;
margin: 0px;
padding: 0px;
}
#outer {
position:absolute;
top: 80px; /* or whatever you need to position the 'frame' */
left: 80px; /* or whatever -- ditto -- */
width: 200px; /* the width of the 'frame' */
height: 200px; /* the height of the 'frame' */
background-color: #eeeeee;
margin: 100px;
overflow: auto;
border: 5px solid #99cc99;
}
*warning*
Includes a 640 by 480 JPG file so, dial-up users might want to grab this zip-file instead and have a look locally.
CSS framed picture "zip file" approximately 80k.
