WOT: Help figuring out HTML prob

[Fly-by-Night CC]

Hey all - am revamping my website stuff and have run into a snag with getting what I'm after.

I've built the main page with 3 frames: top left allows selection between types of woodworking; thumbnail pics appear below in a vertical column; blank frame to the right comprises most of the real estate on the page. Choosing a thumbnail makes a larger image appear in the large righthand area.

Problem is that I want the same #333333 background for all three frames and what happens is that when the thumbnail is chosen, the enlarged pic appears with a non-333333 background (in my case it's white as that's the default setting in my browser).

The only way I've been able to figure out how to do this is to make a seperate html page for each picture that is called up instead of the pic by itself. Any other ways to do it?

Here's a link to a rough assemblage of the new design:

(I'll be tweaking the font colors, sizing and placement after I get this color thing worked out. Also, only the topmost pic is uploaded for illustration purposes only.)

thanks.

[John]

Owen,

What you are looking to do is not possible because your link from the thumbnail is to a JPG file not an HTML page. The background coding you have in the other frames is HTML. The achieve the look you want you need to imbed the image in an HTML page with the background set for the right color. Depending on your skills or your web editing application you can try Javascripting (image rollovers) or dynamic pages in ASP, Coldfusion or some other language. Dreamweaver has a feature called "photo album", where it will take the pictures you have in a folder and quickly create the HTML pages for you. The main page will have the thumbnails and when you click on one it brings up the image in a new window with links to see the next or previous images.

Sorry I don't have a quick solution but I hope these options helps.

JM

[Hermit Crab]

If you elect to use JavaScript (which seems like the simplest solution), you could try the following:

(1) Create an HTML page for the frame used to hold the enlarged images. This page should contain a single image which will be used to display the large images. The initial value of this image could be a logo, or could simply be a solid color image which matches the background (#333333) and would therefore be invisible.

(2) Add a JavaScript function (in your thumbnails frame) to update the image in the other frame.

function changeImage(imageName) { window.top.frames[1].images[0].src = imageName; }

(3) Add an event handler to each thumbnail image to handle "click" events.

onclick="changeImage('

"); return false;

I haven't tested this, so there are no guarantees. Feel free to email me direct if this doesn't make sense (or if it just plain doesn't work!)..

[WoodJunkie]

The problem is you are redirecting the right (main) frame directly to images as opposed to HTML pages. This is why you never get the opportunity to set the background and the default of White is used.

The simplest solution, even though it is by far not the most elegant, is to embed each of your enlarged photos in a simple HTML page where the background is set to the desired color. Then redirect to each HTML page respectively instead of the image file. This approach will suffice for a fairly static and simple website

If your coding skills are beyond beginner then attempt one of Hermit Crab's suggestions.

Regards

[Fly-by-Night CC]

Thanks John. Unfortunately, I'm not familiar enough with dynamic stuff to figure it out. I think, as others said, the easiest way would be to create an html page for each pic. I was just hoping for a tag/attribute command to do it.

[Fly-by-Night CC]

Thanks John. Since I hand-code my pages and JS confuses me, I was hoping for a tag/attribute way of doing it - you confirmed my suspicion that the simplist way of doing it would be to create a separate HTML page for each pic.

Hermit Crab provided some JS scripting to get me started and I'll see if maybe I can work my way through that - otherwise I guess it's an HTML for each pic.

thanks again.

[D K Woods]

Are you loading just the image into the empty frame on the right? As in, the src for the frame is "image.jpg" or something like that? Web browsers will just use their default color in that case. Instead, create an .html page to go around each image, and alter the background color of those .html pages.

There are much easier ways of doing this if you want to get into scripting, but with plain-jane html this is what you've got to do. Let me know if you'd like some pointers on how to script something like that.

david

[AJS]

Its pretty simple really, once you know just 2 bits to include in your html

Insert the above code above your line that says then just add the following line in your section to display the thumbnail

what you should end up with is a thumbnail image (picture1_s.jpg) which, when you click it will display the full size image (picture1.jpg) centered on a coloured background and you just click that full size image to return to your thumbnail page

John