jedi908717
09-27-2002, 01:47 AM
I didn’t really want to bother anyone else with my project, but I just don’t know what else I can do. First off, I want to point out that I don’t know JavaScript. I design things and if needed, plan to figure out how to make them work later. I made navigation menu that I really work, but it’s a little more complicated then I thought it’d be. If anyone could help me I’d be very grateful.
What I want I’m pretty sure can be done in JavaScript. I want a simple mouse over images for a button that goes to a different page, but when that button changes I want another images to change that shows what that link is too.
I created this page to try and show what I wanted to do:
http://www23.brinkster.com/poketpp/nav1.htm
1st changes to show what the link is.
2nd changes the buttons.
3rd is a gif that hopefully helps explain more if needed.
The code I have now is pretty messy I think. Most of it was created by frontpage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="../../Program%20Files/Microsoft%20Office/Office10/fpclass/animate.js">
</script>
<META NAME="GENERATOR" Content="Microsoft FrontPage 5.0">
<TITLE>New Page 1</TITLE>
</HEAD>
<BODY onload="dynAnimation()">
<P>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="694" STYLE="border-collapse : collapse" bordercolor="#111111">
<TR>
<TD WIDTH="222"><A HREF="main.htm" target="main" onmouseover="document['banner'].imgRolln=document['banner'].src;document['text'].src=document['banner'].lowsrc;"
onmouseout="document['banner'].src=document['banner'].imgRolln"> <IMG SRC="images/banner.JPG" WIDTH="222" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="banner" name="banner" dynamicanimation="banner" lowsrc="images/text-home.jpg"></A></TD>
<TD WIDTH="64"><A HREF="section1/section1.htm" target="main" onmouseover="document['games'].imgRolln=document['games'].src;document['text'].src=document['games'].lowsrc;"
onmouseout="document['games'].src=document['games'].imgRolln"> <IMG SRC="images/1-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="games" name="games" dynamicanimation="games" lowsrc="images/text-1.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section2/section2.htm" target="main" onmouseover="document['Articles'].imgRolln=document['Articles'].src;document['text'].src=document['Articles'].lowsrc;"
onmouseout="document['Articles'].src=document['Articles'].imgRolln"> <IMG SRC="images/2-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="Articles" name="Articles" dynamicanimation="Articles" lowsrc="images/text-2.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section3/section3.htm" target="main" onmouseover="document['Showcase'].imgRolln=document['Showcase'].src;document['text'].src=document['Showcase'].lowsrc;"
onmouseout="document['Showcase'].src=document['Showcase'].imgRolln"> <IMG SRC="images/3-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="Showcase" name="Showcase" dynamicanimation="Showcase" lowsrc="images/text-3.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section4/section4.htm" target="main" onmouseover="document['Misc'].imgRolln=document['Misc'].src;document['text'].src=document['Misc'].lowsrc;"
onmouseout="document['Misc'].src=document['Misc'].imgRolln"> <IMG SRC="images/4-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="Misc" name="Misc" dynamicanimation="Misc" lowsrc="images/text-4.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section5/section5.htm" target="main" onmouseover="document['Links'].imgRolln=document['Links'].src;document['text'].src=document['Links'].lowsrc;"
onmouseout="document['Links'].src=document['Links'].imgRolln"> <IMG SRC="images/5-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="Links" name="Links" dynamicanimation="Links" lowsrc="images/text-5.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section6/section6.htm" target="main" onmouseover="document['Restricted'].imgRolln=document['Restricted'].src;document['text'].src=document['Restricted'].lowsrc;"
onmouseout="document['Restricted'].src=document['Restricted'].imgRolln"> <IMG SRC="images/6-off.JPG" WIDTH="64"
HEIGHT="32" ALIGN="BOTTOM" BORDER="0" ID="Restricted" name="Restricted" dynamicanimation="Restricted" lowsrc="images/text-6.JPG"></A></TD>
<TD WIDTH="88"><IMG SRC="images/line.JPG" WIDTH="196" HEIGHT="32" ALIGN="BOTTOM" BORDER="0"></TD>
</TR>
<TR>
<TD WIDTH="222"><IMG SRC="images/text-off.JPG" WIDTH="222" HEIGHT="21" ALIGN="BOTTOM" BORDER="0" name="text"></TD>
<TD COLSPAN="7"> </TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
Any help at all would be great and I’d really appreciate it. A pre-loader would be great too if some one could link me to one.
Sorry about having to scoll, I don't know if I should change it to make it look better, or leave it so the code is easier to read:/
Thanks
What I want I’m pretty sure can be done in JavaScript. I want a simple mouse over images for a button that goes to a different page, but when that button changes I want another images to change that shows what that link is too.
I created this page to try and show what I wanted to do:
http://www23.brinkster.com/poketpp/nav1.htm
1st changes to show what the link is.
2nd changes the buttons.
3rd is a gif that hopefully helps explain more if needed.
The code I have now is pretty messy I think. Most of it was created by frontpage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="../../Program%20Files/Microsoft%20Office/Office10/fpclass/animate.js">
</script>
<META NAME="GENERATOR" Content="Microsoft FrontPage 5.0">
<TITLE>New Page 1</TITLE>
</HEAD>
<BODY onload="dynAnimation()">
<P>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="694" STYLE="border-collapse : collapse" bordercolor="#111111">
<TR>
<TD WIDTH="222"><A HREF="main.htm" target="main" onmouseover="document['banner'].imgRolln=document['banner'].src;document['text'].src=document['banner'].lowsrc;"
onmouseout="document['banner'].src=document['banner'].imgRolln"> <IMG SRC="images/banner.JPG" WIDTH="222" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="banner" name="banner" dynamicanimation="banner" lowsrc="images/text-home.jpg"></A></TD>
<TD WIDTH="64"><A HREF="section1/section1.htm" target="main" onmouseover="document['games'].imgRolln=document['games'].src;document['text'].src=document['games'].lowsrc;"
onmouseout="document['games'].src=document['games'].imgRolln"> <IMG SRC="images/1-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="games" name="games" dynamicanimation="games" lowsrc="images/text-1.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section2/section2.htm" target="main" onmouseover="document['Articles'].imgRolln=document['Articles'].src;document['text'].src=document['Articles'].lowsrc;"
onmouseout="document['Articles'].src=document['Articles'].imgRolln"> <IMG SRC="images/2-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="Articles" name="Articles" dynamicanimation="Articles" lowsrc="images/text-2.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section3/section3.htm" target="main" onmouseover="document['Showcase'].imgRolln=document['Showcase'].src;document['text'].src=document['Showcase'].lowsrc;"
onmouseout="document['Showcase'].src=document['Showcase'].imgRolln"> <IMG SRC="images/3-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="Showcase" name="Showcase" dynamicanimation="Showcase" lowsrc="images/text-3.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section4/section4.htm" target="main" onmouseover="document['Misc'].imgRolln=document['Misc'].src;document['text'].src=document['Misc'].lowsrc;"
onmouseout="document['Misc'].src=document['Misc'].imgRolln"> <IMG SRC="images/4-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="Misc" name="Misc" dynamicanimation="Misc" lowsrc="images/text-4.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section5/section5.htm" target="main" onmouseover="document['Links'].imgRolln=document['Links'].src;document['text'].src=document['Links'].lowsrc;"
onmouseout="document['Links'].src=document['Links'].imgRolln"> <IMG SRC="images/5-off.JPG" WIDTH="64" HEIGHT="32"
ALIGN="BOTTOM" BORDER="0" ID="Links" name="Links" dynamicanimation="Links" lowsrc="images/text-5.JPG"></A></TD>
<TD WIDTH="64"><A HREF="section6/section6.htm" target="main" onmouseover="document['Restricted'].imgRolln=document['Restricted'].src;document['text'].src=document['Restricted'].lowsrc;"
onmouseout="document['Restricted'].src=document['Restricted'].imgRolln"> <IMG SRC="images/6-off.JPG" WIDTH="64"
HEIGHT="32" ALIGN="BOTTOM" BORDER="0" ID="Restricted" name="Restricted" dynamicanimation="Restricted" lowsrc="images/text-6.JPG"></A></TD>
<TD WIDTH="88"><IMG SRC="images/line.JPG" WIDTH="196" HEIGHT="32" ALIGN="BOTTOM" BORDER="0"></TD>
</TR>
<TR>
<TD WIDTH="222"><IMG SRC="images/text-off.JPG" WIDTH="222" HEIGHT="21" ALIGN="BOTTOM" BORDER="0" name="text"></TD>
<TD COLSPAN="7"> </TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
Any help at all would be great and I’d really appreciate it. A pre-loader would be great too if some one could link me to one.
Sorry about having to scoll, I don't know if I should change it to make it look better, or leave it so the code is easier to read:/
Thanks