Writing Variables in iFRAMES with Mouseover

Brian_____ · May 25th, 2004, 09:37 PM

Hi everyone,

My name is Brian. I'm working on a website project in support of my honours thesis for my fourth year. Essentially what I am trying to do is this: when a user rolls their mouse over certain terms in the main area of the page, definitions of those terms will appear in an iFRAME in the left menu bar.

So far my Javascript looks like this:

Code:

<!--- 
{
var default = "Hover over <b>Bolded Text</b> with your cursor to show term definitions in this space.";
var sleep-onset = "<b>Sleep-onset</b> is the time from lights out to the point of falling asleep. (Convention for "alseep" is Stage 1 sleep)";
}
--->
</script>

So far my iFRAME part looks like this:

Code:

<IFRAME name="def" frameborder=0 scrolling=no width=220px height=50px src="def.html"></IFRAME>

And my iFRAME html doc looks like this so far:

Code:

<html>
<head><LINK REL=StyleSheet HREF="css_nap.css" TYPE="text/css"></head>
<body>
<script language="Javascript">
var info1 = "Hover over";
var info2 = " <b>Bolded Text</b>";
var info3 = " with your cursor to show term definitions in this space.";
document.write(info1 + info2.fontcolor("darkcyan") + info3);
//-->
</script>
</body></html>

So the whole reason for this idea is so that I can help people that don't have a lot of background in my area to understand what is going on. If this idea of mine works, then I think the page will be a much easier read by keeping definitions to the side.

I would really appreciate any help you could give me on this project.
Thanks for you time everyone,

Brian

Snib · May 25th, 2004, 09:44 PM

I think (definitely not sure) that you can just reference the <iframe> document and then write() to it.

document.getElementById("iframe_id").document.writ e("text");

Otherwise, I would switch to <div> and innerHTML, as it's much easier in my opinion than finding certain properties of iframes (believe me, I've spent hours trying to do this kind of thing....:))

HTH,

Snib

<><

ChrisScott · May 26th, 2004, 06:40 AM

Hi Brian,

You could put a div in your IFrame page to write the data to, e.g.

<div id="myDiv"></div>

Then call a method with the required text as a parameter when you want to change the content...

<span onmouseover="ShowInfo(myInfo);">some text</span>

function ShowInfo(pInfo){
window.frames[0].document.getElementById("myDiv").innerHTML = pInfo;
}

myInfo could be any var you like.

BTW default is a reserved word & hyphens are not allowed in var names, so you will need to rename your default / sleep-onset to avoid errors.

HTH,

Chris

Brian_____ · May 26th, 2004, 11:04 PM

Thanks for the advice guys, my workload is pretty hectic so I have not had a chance to try them out --- but I'm sure they'll work great!

Again, thanks so much (I've posted my problem in forums all over and this is the only one where people have given me suggestions!! :))

Brian