silvertine
05-22-2008, 10:25 PM
I want to build a website like this:
* When you click a link, the entire page doesn't reload. Instead, the new content shows up exactly where I want it to (like an iframe).
* The individual menu links are precisely placed over the background image, wherever I want them to be, and they stay there when you resize the window.
* Links respond to hover and click. I.e., background image is a piano, with its keys being links. Hovering over a link replaces it with an image of a halfway-pressed key. Clicking a link replaces it with an image of a fully-pressed key.
* One link is an image gallery. When clicked, a bunch of thumbnail images pop up somewhere. Hovering over a thumbnail causes a larger version of the picture to pop up somewhere else on the page (the larger image was preloaded). Clicking a thumbnail opens a hi-res picture in a new tab/page.
* The website works the same across the major browsers. I'm not splitting hairs over outdated or PDA browsers.
I have an iframe/table version of this that works okay in Firefox and awful in IE7. I keep encountering bugs.
I'm particularly having problems with the 3 tiered layout within one page: Menu link > thumbnails > bigger image.
I'm also having problems placing the links exactly where I want them, so that they show the same in FF and IE.
Can anyone give me a summary of how they would implement this idea? Would you use css and divs? Javascript? Ajax? I'm kinda new to web design.
The more advice you experts can give me, the better. At the very least, point me in the right direction. Thank you thank you thank you.... :thumbsup:
* When you click a link, the entire page doesn't reload. Instead, the new content shows up exactly where I want it to (like an iframe).
* The individual menu links are precisely placed over the background image, wherever I want them to be, and they stay there when you resize the window.
* Links respond to hover and click. I.e., background image is a piano, with its keys being links. Hovering over a link replaces it with an image of a halfway-pressed key. Clicking a link replaces it with an image of a fully-pressed key.
* One link is an image gallery. When clicked, a bunch of thumbnail images pop up somewhere. Hovering over a thumbnail causes a larger version of the picture to pop up somewhere else on the page (the larger image was preloaded). Clicking a thumbnail opens a hi-res picture in a new tab/page.
* The website works the same across the major browsers. I'm not splitting hairs over outdated or PDA browsers.
I have an iframe/table version of this that works okay in Firefox and awful in IE7. I keep encountering bugs.
I'm particularly having problems with the 3 tiered layout within one page: Menu link > thumbnails > bigger image.
I'm also having problems placing the links exactly where I want them, so that they show the same in FF and IE.
Can anyone give me a summary of how they would implement this idea? Would you use css and divs? Javascript? Ajax? I'm kinda new to web design.
The more advice you experts can give me, the better. At the very least, point me in the right direction. Thank you thank you thank you.... :thumbsup: