Web Easy 7 navigation bar

jkidston · 07-13-2008, 01:49 PM

Looking to put in a window in a page with a scroll bar, it would be page 2 of the site and would be the image gallery. Inside this window will be images you will click on and then a larger image will appear to the right of it.

I'd like the window along the left side of the page and one I can put thumbnails in.

In a different program, I'd do it with "frames", but this program doesn't seem to have that option.

Any ideas?

jk

StephanHeijl · 07-18-2008, 12:02 PM

There are two ways: The dirty and the neat way.
As you may have guessed, the neat way takes a bit more time and effort, but at least it's W3 compliant.
Quick and dirty: iframes. Just name them, and use a target link.
Neat: One div for the pictures, another for the big picture. Id the big picture div, and use this javascript on the links:

Code:

<img src="thumb.url" style="cursor:pointer;" onclick="document.getElementById('ID').style.backgroundImage = 'image.URL';" />

Even this is VERY basic, and could most likely be improved greatly, but it'll do what you ask.

07-13-2008, 01:49 PM	#1 (permalink)
jkidston Registered User Join Date: Jul 2008 Posts: 1 OS: windows xp homed	Web Easy 7 navigation bar Looking to put in a window in a page with a scroll bar, it would be page 2 of the site and would be the image gallery. Inside this window will be images you will click on and then a larger image will appear to the right of it. I'd like the window along the left side of the page and one I can put thumbnails in. In a different program, I'd do it with "frames", but this program doesn't seem to have that option. Any ideas? jk

07-18-2008, 12:02 PM	#2 (permalink)
StephanHeijl Registered User Join Date: Jul 2008 Posts: 9 OS: Vista Ultimate 32Bit	Re: Web Easy 7 navigation bar There are two ways: The dirty and the neat way. As you may have guessed, the neat way takes a bit more time and effort, but at least it's W3 compliant. Quick and dirty: iframes. Just name them, and use a target link. Neat: One div for the pictures, another for the big picture. Id the big picture div, and use this javascript on the links: Code: <img src="thumb.url" style="cursor:pointer;" onclick="document.getElementById('ID').style.backgroundImage = 'image.URL';" /> Even this is VERY basic, and could most likely be improved greatly, but it'll do what you ask.