This technique uses ideas from A list apart: CSS Drop Shadows
The best size for an image for the web is about 300 pixels wide. If you need more detail, make it clickable and link to the larger size.
The full package is the image thumbnail inside a container with title, note and source copyright. The container is sized to fit 33% of the workarea, and the picture is scaled to fit inside the container. For this a thumbnail size of a width of 250-300 pixels gives the best result. The little icon under the image automatically appears when you put an <a> around the image. You can only link to a larger version of the image.
<div class="figure-plus-container figure-left"> <div class="figure-plus"> <div class="figure-title"> <span class="figure-nr">Fig 1:</span> Ponte Vecchio, Florence</div> <div class="figure-image"> <a href="pontevecchio"><img src="pontevecchio-300x225.jpg" alt="Bridge" width="300" height="225" class="scaled"/></a> </div> <div class="figure-note"> The Ponte Vecchio bridge over the Arno river in Florence, Italy </div> <div class="figure-source-copyright"> Source: <a href="http://www.cepolina.com/freephoto/">Cepolina Photos</a> </div> </div> </div>
Simple figure with drop-shadow. The size can be any size (within reason). This figure has a special feature. It will zoom in the same page if you click on it. If you have no JavaScript it will show the larger picture on a new page. Code is shown below. You only need the JavaScript once if you have several popup images
<div class="figure figure-right" style="clear: both"> <div class="figure-image"> <a href="girlseurope.jpg"><img src="girlseurope-200.jpg" class="mouseclickpop" alt="Girls" width="200" height="150"/></a> </div> </div> <script src="scripts/PopBox.js" type="text/javascript"></script> <script type="text/javascript"> var popclickpop = { 'onclick' : function() { Pop(this,-50,'PopBoxImageLarge'); }, 'pbShowPopBar' : false, 'pbShowPopImage' : false, 'pbShowPopText' : false, 'pbShowRevertImage': false, 'pbShowPopCaption' : true }; PopRegisterClass('mouseclickpop', popclickpop); popBoxShowPopBar = false; </script>
It isn't possible to use a drop shadow and also center the image because when you float a box to the left or to the right, the webbrowser automatically calculates the smallest size of the surrounding box. There is nothing to do this and also center the image. If you want a centered image, you can have a border, that's it. The classes can only be used directly on the <img> tag.
<img src="yorkbuilding-615.jpg" width="615" height="410" alt="Building in York" class="border centered"/>
You can also add a drop shadow to a <div> Since there is no natural width for just text, you must set the width manually. Try a width of 33%.
<div class="dropshadow figure-right" style="width: 10em"> <div class="shadowed"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut blandit, felis quis faucibus euismod, nisi massa iaculis velit, ac accumsan pede risus at erat. Aenean eleifend leo non velit. </div> </div>
Document last modified: 2008/12/15 . Content in this portal is modified daily by a community of providers.
Disclaimer.
Copyright: