 |
||||
|
Image
Bounds
(ver 2.1.0 for MX; ver 1.0.0 for UD4) Basics Example Issues
This behavior is now on the Macromedia Exchange
When you need to control the dimensions of your images.
If you need thumbnails for a page, but have only fullsize images, or your page design demands that images not be oversized, or other uses you will no doubt discover, this SSB allows you to set a bounding box into which your images will be made to fit with their aspect ratios maintained. Works well in Repeat Regions too.
| Basics: |
When you need to control the dimensions of your images, just apply the Image Bounds SSB.
Possible uses: if you need thumbnails for a page, but have only fullsize images (altho realize that filesize, and hence their download time, will not be changed); or your page design demands that images not be oversized (see example below).
How to apply the behavior:
- First add an image or a dynamic image to your asp page (in or out of a Repeat Region or Horizontal Looper) Be sure that your dynamic image runs properly before adding the behavior.
- Then select the image, go to the Server Behaviors panel and select Image Bounds.
- Enter the dimensions of an imaginary box into which you want your image to be fitted. Once applied, and without distorting the image, it will be will be scaled to fit inside this box.
- Before you run the page, be sure to copy the vwd_scripts folder and its contents to your remote host or it just plain won't work!
- If you later decide to change the image source, or if you move the document to a new folder within the site, simply open a behavior in the SSB window and reapply the current Image Bounds, even without making any changes. This will update the code properly.
Note: that on each application or reapplication of the behavior, the entire document is searched for Bounded images. If any image on the page is found to have explicit dimension attributes added, these attributes are removed automatically. This prevents two sets of image dimensions from being sent to the client browser. Too, if the image source of any image has been changed, its Image Bounds function call will be updated. And finally, if you have moved the document to a new folder in the site, the Include path will be updated for you.
That's all there is to it!
| Example, as viewed in Live Data mode or in a Browser: |
|
Unexpectedly Curious
about how the circle was created, into which we drop the image?
Here's how. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Now
with Image (With
this |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Known issues : |
None, yet. So far this has been tested on:
On PCs: IE5.5 W2k, IE5.5 W98se, IE5.0 W98se, NN4.08 W2k, NN4.75 W2k, NN4.77 W98se, NN6.0 W2k, NN6.1 W2k, Opera5.11 W2k, Mozilla 0.9.1 W2k
On Macs: IE5 OS9.0.4, NN4.72 OS9.0.4, ICab2.5.1
| Unanswered questions? |
Please do not hesitate to ask for clarification of any aspect of this
SSBehavior. All questions will be answered and may ultimately will appear
on this page as well.
| Here's how the image in a circle was created: This shows how, within Fireworks, I created the circle with a centered image slice. This was then exported as a gif along with its html file, and the latter subsequently imported into DW/UD. At that point, the central slice was simply deleted, leaving an empty table cell, whose bgcolor was changed to white and into which the dynamic image was placed. Back to the example. |  |
|
I am ready to help you by writing javascripts, or that specialized Dreamweaver extension you've always wanted, on a contract basis. Just email me at michael@valleywebdesigns.com.