Hi folks, looking to do a website redesign. What i would like to do is have a page with thumbnail images down one side with a large image in the centre of the page. On rollover the main image changes to the thumbnail selected. Sounds easy enough with disjointed rollovers ( I use DW). However, my pictures are not all the same orientation. They will all have dimensions of say 400x266 pixels but may be in portrait or landscape mode. My limited understanding of disjointed rollovers is that the images have to be the same size, i.e square. If this is the case is there a way of getting the table cell in which the image appears to resize to accomodate the orientation of the picture as it appears?

I've looked at solutions such as J! Album and Simple Viewer but would really prefer to do it this way if possible. Any help or guidance you can offer would be much appreciated.

Thanks, Lol

You shouldn't need the images to all be the same size, but you'll probably want to set a size on the element that will contain all the images larger enough to fit them all so the rest of the layout doesn't move around.

Set a div to display the image a little larger than your largest width and a little larger than your largest height.

I would store all the images in an array and you should be able to store the width and height of each image along with the src and an ID.

You might set something in JavaScript like

imageArray["image-1"] = new Image (800, 600);
imageArray["image-1"].src = pathToYourImage-1.jpg;
imageArray["image-2"] = new Image (600, 800);
imageArray["image-2"].src = pathToYourImage-2.jpg;


with an entry for every image you want to appear in the middle of the page.

When you rollover one of the thumbnails you'd likely call a function that will replace whatever image is currently being displayed in the center for the larger version of the thumbnail you just rolled over.

You'd want to set the are in the html where the images will display large enough to accommodate all your images. So with the two images I called above you'd need a width of 800px and a height of 800px and probably a little more on each side to have some room.

You could set that container div for the images to center the images or anything really to make it seamless when the images change.

Hi Steven, thanks for the reply. What you have suggested makes sense. of course I'll let DW handle the codeing as it is beyond me at this stage

Thanks, Lol

Hope I helped.

You did, and I have upped your talkupation as thanks!

Thanks Lol. I'm not sure how well DW does with JavaScript since it's been awhile that I've used it. If for any reason DW isn't producing something that's working feel free to come back here and either post a link to the page in question or post some code and I'll take a look.

Appreciate it. I know a lot of people slate DW for producing "ugly" code etc but it's a good tool for non web designers such as myself to get a site up and running if they don't have the time/skill/inclination to learn hand coding.

Cheers, Lol

Steven, we have a PROBLEM! Following instructions off the web for doing a disjointed rollover in DW I created a transparent gif to use as a shim. This is then swapped with another image when a thumbnail is rolled over. I set the shim to 400x400 pix as my images are of size 400x267 in either portrait or landscape. I get the image to swap, trouble is the new image is being stretched to 400x400, which is not good! Why does this re-sizing occur though and can it be "turned off"? Any ideas please?

Thanks, Lol

Actually I've sorted it. Extend the canvas of the image in PS until you have a square image and make the canvas the same colour as the main page background. Easy!

Cheers, Lol

Glad you got it worked out. To me the thing about DW is the that the code you're left with is bloated. For example there's no reason you would need the transparent.gif to get this to work. I'm not saying you can't use it, but you shouldn't have to.

I do understand though about using DW if coding isn't a specialty. I would though recommend learning at least some of the basics. HTML is easy to learn. It's probably easier to learn than it is to learn how to use Dreamweaver. The majority of CSS is pretty easy to learn to, though building all CSS layouts can get tricky at times.

I'll grant you though that not everyone will pick up JavaScript.

I've done some programming in VB6 ( created an EPOS tied to a database for a small business ) so I can often look at site page source and pick apart how things work and have manipulated code on my own site in DW code view. I have a bit of a mental block on web development at times, must be my age

Thanks, Lol

Funny. I think your programming skills are probably more than enough then. I do the same thing a lot where I grab someone else's code as a starting point (usually a free script) and then tweak it till it's what I want.