HTML CSS: Iframes/Dynamic Problem

Question

I am having some trouble creating a experimental 'dynamic' style website. The site is set up as follows. The user has a menu of links to choose from, specifically using an image map. When they hover over a selection, an iframe pops up (becomes visible) displaying some data. When the user removes the mouse the iframe goes away, until the user hovers over another link.

-- It seems to be working well, but only intermittently. Sometimes after leaving one of the anchors, the syle, text etc. still occupies the frame even after i hover over another link. This behavior seems to be fairly random, but there must be a way to fix it.

Here's an example of what i'm using. The show function sets the frame to visible if the argument is a 1, and hidden if 0. frameset sets the main frame to the desired html document. I tried implementing a reset to set the frame to something blank after leaving the link to try and fix it, but the problem persists.

<area shape="circle" coords="..." href="..." onmouseover="Show('frame', 1);
frameset('page.html');" onmouseout="Show('frame', 0); reset();" />

And the functions

function frameset(a)
{
  document.all.frame.src=a;
}

function reset()
{
  document.all.frame.src=blank.html;
}

It's a very hard problem to describe, so let me know if more information or code is needed. Any better alternatives to my method are also welcome, considering i'm not fluent in javascript :) Thank you

Answer 1

I think what you are doing could be performed better by using a more modern approach.

The image map could have absolutely positioned block level anchor tags.. but this doesn't seem to be the problem.

Instead of using iframes, I'd recommend using AJAX to get the information and a framework like jQuery to help you display the data.

You could load the AJAX and display the box with a loading throbber (http://www.ajaxload.info) on mouseover, and parse the data into viewable format inside the div.

Learning AJAX

AJAX is when a page makes a http request to the server and can also return data which is then used with Javascript to update the DOM.

jQuery is a Javascript framework designed to abstract away browser specific code and inconsistencies and just make using Javascript a better experience.

Check out jQuery's AJAX functions

Good luck!!