...

View Full Version : Newer alternatives to iframes and tables



silvertine
05-23-2008, 03:19 AM
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 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:

zfred09
05-23-2008, 03:28 AM
* 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).
Although I haven't worked with Ajax before I do believe this is where it shines.


* 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.
Use CSS for this, there are many tutorials on creating CSS rollovers.


* 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.
Flash will be the ticket here. (Can Ajax also do this? Not sure?)


* The website works the same across the major browsers. I'm not splitting hairs over outdated or PDA browsers.
This usually takes a little extra work, but try to code following semantics or good coding practice and it should help keep the work down.

Good luck, this is a lot to learn right away and will take a lot of effort, but with time you can accomplish some quite amazing things.

_Aerospace_Eng_
05-23-2008, 03:28 AM
You would use AJAX to load the content without a page reload though you should make it to where the user can still see the content if javascript is disabled. Here are a few scripts that might be of use.

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum