Click to See Complete Forum and Search --> : Using java menu to target iframe


Stevo
05-08-2004, 11:55 AM
Okay, I have a CSS/javascript menu and I want the links to target an iframe called "iframe" instead of loading the pages in the main window. Here's the code I'm using:

<script language = "javascript">
<!--

function LmOver(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#CCCCCC";
elem.style.cursor = 'hand'}

function LmOut(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#CCCCCC";}

function LmDown(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#CCCCCC";}

function LmUp(path)
{location.href = path;}

//-->
</script>

<table border="0" width="120" bgcolor="#000033" cellspacing="0" cellpadding="0">
<tr><td width="100%">

<table border="0" width="100%" cellspacing="1" cellpadding="1">
<tr><td width="100%" onMouseover="LmOver(this, '#006633')" onMouseout="LmOut(this, '#003333')" onMouseDown="LmDown(this, '#006633')"
onMouseUp="LmUp('welcome.php')" bgcolor="#003333"><A HREF="welcome.php" Class="navlink">&nbsp; Welcome</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#006633')" onMouseout="LmOut(this, '#003333')" onMouseDown="LmDown(this, '#006633')"
onMouseUp="LmUp('news.php')" bgcolor="#003333"><A HREF="news.php" Class="navlink">&nbsp; News</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#006633')" onMouseout="LmOut(this, '#003333')" onMouseDown="LmDown(this, '#006633')"
onMouseUp="LmUp('rules.php')" bgcolor="#003333"><A HREF="rules.php" Class="navlink">&nbsp; TVR Rules</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#006633')" onMouseout="LmOut(this, '#003333')" onMouseDown="LmDown(this, '#006633')"
onMouseUp="LmUp('members.php')" bgcolor="#003333"><A HREF="members.php" Class="navlink">&nbsp; TVR Members</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#006633')" onMouseout="LmOut(this, '#003333')" onMouseDown="LmDown(this, '#006633')"
onMouseUp="LmUp('chapters.php')" bgcolor="#003333"><A HREF="chapters.php" Class="navlink">&nbsp; Chapters</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#006633')" onMouseout="LmOut(this, '#003333')" onMouseDown="LmDown(this, '#006633')"
onMouseUp="LmUp('links.php')" bgcolor="#003333"><A HREF="links.php" Class="navlink">&nbsp; Links</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#006633')" onMouseout="LmOut(this, '#003333')" onMouseDown="LmDown(this, '#006633')"
onMouseUp="LmUp('links.php')" bgcolor="#003333"><A HREF="http://www.tosw.net/modules.php?name=Forums&file=index&c=6" Class="navlink">&nbsp; Forum</a></td></tr>
</table>

</td></tr>
</table>

Let me know if this is possible.

Fang
05-08-2004, 12:05 PM
iframe (http://www.quirksmode.org/js/iframe.html)

Stevo
05-08-2004, 01:43 PM
That doesn't help much. I don't even know where I'd put the code.:confused:

Fang
05-09-2004, 02:14 AM
JavaScript:
function LmOver(elem, clr)
{elem.style.backgroundColor = clr;
elem.childNodes[0].style.color = "#CCCCCC";}

function LmOut(elem, clr)
{elem.style.backgroundColor = clr;
elem.childNodes[0].style.color = "#CCCCCC";}

function LmDown(elem, clr)
{elem.style.backgroundColor = clr;
elem.childNodes[0].style.color = "#CCCCCC";}

function LmUp(path)
{frames['iframe'].location.href = path;}

note; children replaced by childNodes for x-browser compatibility.

HTML:

<tr><td width="100%" onMouseover="LmOver(this, '#006633')" onMouseout="LmOut(this, '#003333')" onclick="LmDown(this, '#006633'); LmUp('welcome.php'); return false;" bgcolor="#003333"><A HREF="welcome.php" target="iframe" Class="navlink"> Welcome</a></td></tr>
change all other tr's in a simular way.

BTY the use of tables for layout and iframes is discouraged due to accessibility problems.

Stevo
05-09-2004, 10:53 AM
That works great now. Now which would be better, this menu or a flash menu?