Dynamic Include Page? Change what's included as mouse moves?

[Mr B]

Howdy,

I want to set up an Include page in a cell of a table. Then I want to be able to change which page
is included on the fly as the user moves the mouse of the various links on the page. How can I do
this?

THe include page was set up via FrontPage so it put it's Bot stuff in there, but if someone could
tell me the "standard" way to use an include page and if there's a way using onMouseover etc to then
change that and refresh it on the fly, that'd be great.

Thanks.

 

[Lee]

Mr B said:

Howdy,

I want to set up an Include page in a cell of a table. Then I want to be able
to change which page
is included on the fly as the user moves the mouse of the various links on the
page.

Things that happen as a mouse moves over an area should generally be limited
to things that can happen *very* quickly, so that it can be done before the
mouse moves on to some other spot.
Loading new content over the Internet doesn't qualify as something that can
happen *very* quickly.

 

[Mr B]

Yeah but loading in 3 lines of text doesn't take more than a split second or so.

 

[Ivo]

Yeah but loading in 3 lines of text doesn't take more than a split second

or so.

Yes, it does. I have closed my dail-up connection after the initial load.

On top of that, I can get quite impatient when the connection dialog
re-appears without me expecting it.
And even with a connection alive, the request for an empty file takes some
time. It is much better to load 100x three lines once, than 100 times load
three lines.
Please don't do too fancy things onmouseover. It will not make you many
friends.
Ivo

 

[Mr B]

But there are ways to make the data all load up right away and jsut display whichever you want
depending on where the mouse is. I don't know if you do it with Layers or CSS stuff or what but I
know it's possible because there are lots of sites that use it. I just don't know the best way to
accomplish it.

 

[Lee]

Mr B said:

Yeah but loading in 3 lines of text doesn't take more than a split second or so.

Longer than you seem to realize, and the exact amount of time depends on
too many conditions that you can't control.

If it's only three lines of text, load all of the data into an array,
instead of hitting the server again for each one.

 

[Ivo]

But there are ways to make the data all load up right away and jsut display whichever you want
depending on where the mouse is. I don't know if you do it with Layers or CSS stuff or what but I
know it's possible because there are lots of sites that use it. I just don't know the best way to
accomplish it.

Ah, that I did not know. It is usually done with some function which changes
the "innerHTML" or "innerText" of (a section of) the page. Javascript can
also change style to make it (in)visible. Layers are history. For examples,
from the most basic to as complex as you want it, have a look at
www.dynamicdrive.com and click on "dynamic content". And as with any
research, don't shy away from Google.
Ivo

 

[Mr B]

Well, for anyone else folowing this thread.... Here's what I did to solve the problem. the
dropmsg0 Div below is the default. The rest are what replaces it when the mouse is in certain
places.



Here's the code from the Header Section:

<style type="text/css">
..dropcontent{
width: 300px;
height: 140px;
background-color: #FFFFFF;
display:block;
}
</style>


<script type="text/javascript">
function expandone(which)
{
var inc=0
while (document.getElementById("dropmsg"+inc))
{
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
document.getElementById("dropmsg"+which).style.display="block"
}



Then in the area where I wanted to modify the information shown, I created a bunch of DIV sections
such as:

<div id="dropmsg0" class="dropcontent">
formatted info here
</div>

<div id="dropmsg1" class="dropcontent">
formatted info here
</div>

<div id="dropmsg2" class="dropcontent">
formatted info here
</div>

<div id="dropmsg3" class="dropcontent">
formatted info here
</div>


Then on whatever you want to do the onMouseOver stuff on, just put in a line such as:
<a href="link.html" onMouseOver="expandone('1')" onMouseOut="expandone('0')">


Was really easy once I figured out what I was doing since I had never used Divs before.