Dear Miss (Mrs.?) Warner,
I am a pro graphic designer coming from type/print and going into web making and I am reading your beautiful text DWCS3 for dummies to know anything about DW.
I am making a site where I am using one of your tutorials you explain in the book and that is shown in your site about Robin Eschner: the photo gallery of his works (thumbnails at left, detail at right appearing onMuseOver).
Well, everything is working fine, but some of the pictures appear stretched: that’s to say, in the opere (works) page the first picture is wide and is shown correctly, while the others are high and are shown as horizontal, instead of their real dimensions. Your site has pictures of different dimensions and are shown correctly.
What do I get wrong?
Thanks very much if you can help me.
Massimo
Cantello, Italy
That’s a great question, Massimo. Here’s the “magical” solution.
When you set up rollovers by using the Image Swap Behavior, the images all have to be the same height and width. That works fine if all of your images are the same, but you’re not the only one who has artwork of varying sizes and dimensions and you’ve run into a common problem.
As an experienced designer I’m sure you’ll appreciate how I managed to get images of different sizes and shapes to all display well in a similar Swap Image layout.
Just copy them all onto a background that’s the same size.
For example, if most of your images are 300 by 500 but a few are 200 by 400, set up the Swap Image with an image that is 300 by 500.
To get the smaller images to look right, create a new image that is 300 by 500, copy the smaller images onto it one at a time, center them, and save each one for the web. Of course, you need to make sure the background of the images is the same as the background on your web page, but because you’ve chosen a white background on your site, that part will be easy.
The result will be that none of your images appear distorted because they really are 300 by 500 even though they appear to be a variety of sizes. As long as the background matches the background of your web page, no one will ever know but you…
Hope that helps and I wish you all the best,
Janine
Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.
1 response so far ↓
1 janinewarner // Mar 29, 2010 at 9:37 pm
When use use the rollover effect, like I have in many of the examples in my books and in videos, the photos that appear in the rollover space must all be the same size. If use swap one photo with a smaller photo, the smaller one is likely to appear stretched and distorted. The solution is to resize all your images in a program like Photoshop (remember you can crop images and change the canvas size as well as the image size to get all of your photos exactly the same dimensions. Then when you set up the rollover or swap image behaviors in Dreamweaver, they’ll all look good because they’re all the same size. It makes the overall design cleaner to have everything line up anyway, and it’s not a lot more work to size all your images before you build the rollover effects.
Hope that helps,
J
You must log in to post a comment.