Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newer alternatives to iframes and tables

    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....

  • #2
    New Coder zfred09's Avatar
    Join Date
    Dec 2006
    Posts
    69
    Thanks
    0
    Thanked 5 Times in 5 Posts
    * 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.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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/dynamici...jaxcontent.htm
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •