Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    103
    Thanks
    13
    Thanked 0 Times in 0 Posts

    .SHTML Multipage Question

    Hello everyone,
    I have an issue that I am dealing with, so maybe you guys know a better way.
    I have developed 5 .shtml pages. I am bringing the pages together (Like a puzzle) with the include statment (see below). Everything works great though I am wonering about the header. The header has a navbar. The problem is how do I dynamically make the button on the nav bar light up when you go to that page without creating another header.shtml. There has got to be another way to accomplish this.. Please advise.. You are welcome to ICQ me @ 10070548
    Thanks, Dan

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <!--#include virtual="header.shtml" -->
    <!--#include virtual="left.shtml" -->
    <!--#include Virtual="service_content.shtml" -->
    <!--#include virtual="right.shtml" --->
    <!--#include virtual="footer.shtml" -->

  • #2
    Regular Coder Feyd's Avatar
    Join Date
    May 2002
    Location
    Los Angeles, CA Maxim: Subvert Society
    Posts
    403
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!--#set var="page" value="DOCUMENT_URI" -->
    <p><!--#if expr="\"$page\" = \"index.shtml\"" --><span style="navon"><!--#else --><span style="navoff">Home Link</span> | 
    <!--#if expr="\"$page\" = \"second.shtml\"" --><span style="navon"><!--#else --><span style="navoff">Second Link</span> | 
    <!--#if expr="\"$page\" = \"third.shtml\"" --><span style="navon"><!--#else --><span style="navoff">Third Link</span></p>
    The if-elif-else statements can also be shortened to be more efficient, but that is basically it. However, you are going to be giving your box a huge overhead with all of these includes, and the xssi processing in some of these, so you may want to consider that in conjunction with how much use you expect these pages to get.

    More info : http://www.uic.edu/depts/scailab/system/tutorial.shtml
    Moderator, Perl/CGI Forum
    shadowstorm.net - subvert society

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    103
    Thanks
    13
    Thanked 0 Times in 0 Posts

    What if??

    Hey Thanks for the quick response...
    What if it is a button.. Here is my code for the header...
    This header will be on every page. How can I make it to when the user clicks on the "index_03.jpg" for example it will change the image to a highlighted gif image. Kinda like letting you know where you are on the nav bar... Here is addy http://www.apbcpa.com/main/
    please note I have not linked the other links on the nav bar.
    Thanks for your help...


    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <HTML>
    <HEAD>
    <TITLE>WELCOME TO APBCPA.COM</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    </HEAD>
    <BODY BGCOLOR=#FFFFFF topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" leftmargin="0" bottommargin="0">
    <TABLE WIDTH=756 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="0">
    <TR>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="213"> <IMG SRC="images/spacer.gif" WIDTH=213 HEIGHT=1></TD>
    <TD width="2"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    <TD width="2"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    <TD width="118"> <IMG SRC="images/spacer.gif" WIDTH=118 HEIGHT=1></TD>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="129"> <IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=1></TD>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="64"> <IMG SRC="images/spacer.gif" WIDTH=63 HEIGHT=1></TD>
    <TD width="3"> <IMG SRC="images/spacer.gif" WIDTH=3 HEIGHT=1></TD>
    <TD width="233"> <IMG SRC="images/spacer.gif" WIDTH=225 HEIGHT=1></TD>
    <TD width="5"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    </TR>
    <TR>
    <TD COLSPAN=2> <IMG SRC="images/index_01.jpg" WIDTH=214 HEIGHT=126></TD>
    <TD COLSPAN=3> <IMG SRC="images/index_02.jpg" WIDTH=122 HEIGHT=126></TD>
    <TD width="1"> <IMG SRC="images/index_03.jpg" WIDTH=1 HEIGHT=126></TD>
    <TD width="129"> <IMG SRC="images/index_04.jpg" WIDTH=129 HEIGHT=126></TD>
    <TD width="1"> <IMG SRC="images/index_05.jpg" WIDTH=1 HEIGHT=126></TD>
    <TD COLSPAN=4> <img src="images/index_06.jpg" width=295 height=126></TD>
    </TR>
    <TR>

    <TD COLSPAN=11><img src="images/menu/0_navbar.gif" width="60" height="39"><img src="images/menu/1_navbar.gif" width="91" height="39"><img src="images/menu/2_navbar.gif" width="107" height="39"><img src="images/menu/3_navbar.gif" width="120" height="39"><img src="images/menu/4_navbar.gif" width="129" height="39"><img src="images/menu/5_navbar.gif" width="104" height="39"><img src="images/menu/6_navbar.gif" width="99" height="39"><img src="images/menu/7_navbar.gif" width="50" height="39">
    </TD>

    <TD ROWSPAN=3 width="5">&nbsp; </TD>
    </TR>

  • #4
    New Coder
    Join Date
    Aug 2002
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I havent messed too much with shtml, but I have done a regular HTML page that used JavaScript to determine the location and depending on the location changed images. I am not sure if there is an easier way with SHTML, like I said I havent messed with it too much...Also I am not sure if my JavaScript method is correct, but hey what the heck I will throw it out here anyhow

    <script>
    page = document.URL.toUpperCase();
    if(page.search("PAGE1.HTML")>-1){
    do something
    }
    else...
    </script>

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    103
    Thanks
    13
    Thanked 0 Times in 0 Posts

    hmmm

    Is there a tutorial on what you just said? I see what you mean but I am unable to write the code that you are refering...

    Signed --- a wanna be web developer..!

  • #6
    New Coder
    Join Date
    Aug 2002
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I dont know if there are any specific tutorials on that. I wouldnt even begin to know what to call it. Let me see if I can make it a little more informative.

    we have our menu image(s) that should be "highlighted" if we are on its corresponding page(s).

    <img src="menu1.gif" id="page1">
    <img src="menu2.gif" id="page2">

    the script checks to see what page we are on then replaces the src of the menu image with the src of the highlighted image.

    <script>
    page = document.URL.toUpperCase();
    if(page.search("PAGE1.HTML")>-1){
    document.getElementById('page1').src="menu1highlight.gif"
    }
    else if(page.search("PAGE2.HTML")>-1){
    document.getElementById('page2').src="menu2highlight.gif"
    }
    </script>

    Hopefully this makes a little more sense.
    Last edited by DanHibiki; 11-04-2002 at 08:13 PM.

  • #7
    Regular Coder
    Join Date
    Nov 2002
    Posts
    103
    Thanks
    13
    Thanked 0 Times in 0 Posts

    I am trying...

    I am still unable to make it work, But I feel like I am close... Please review my code... Thanks for AALLLLLLL your help!

    ~~~~~~~~~~~~~~~~~~~~~~~~~
    <HTML>
    <HEAD>
    <TITLE>WELCOME TO APBCPA.COM</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <script>
    page = document.URL.toUpperCase();
    if(page.search("services.shtml")){
    document.getElementById('page1').src="images/menu/1_navbar_roll.gif"
    }
    else if(page.search("PAGE2.HTML")){
    document.getElementById('page2').src="menu2highlight.gif"
    }
    </script>
    </HEAD>
    <BODY BGCOLOR=#FFFFFF topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" leftmargin="0" bottommargin="0">
    <TABLE WIDTH=756 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="0">
    <TR>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="213"> <IMG SRC="images/spacer.gif" WIDTH=213 HEIGHT=1></TD>
    <TD width="2"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    <TD width="2"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    <TD width="118"> <IMG SRC="images/spacer.gif" WIDTH=118 HEIGHT=1></TD>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="129"> <IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=1></TD>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="64"> <IMG SRC="images/spacer.gif" WIDTH=63 HEIGHT=1></TD>
    <TD width="3"> <IMG SRC="images/spacer.gif" WIDTH=3 HEIGHT=1></TD>
    <TD width="233"> <IMG SRC="images/spacer.gif" WIDTH=225 HEIGHT=1></TD>
    <TD width="5"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    </TR>
    <TR>
    <TD COLSPAN=2> <IMG SRC="images/index_01.jpg" WIDTH=214 HEIGHT=126></TD>
    <TD COLSPAN=3> <IMG SRC="images/index_02.jpg" WIDTH=122 HEIGHT=126></TD>
    <TD width="1"> <IMG SRC="images/index_03.jpg" WIDTH=1 HEIGHT=126></TD>
    <TD width="129"> <IMG SRC="images/index_04.jpg" WIDTH=129 HEIGHT=126></TD>
    <TD width="1"> <IMG SRC="images/index_05.jpg" WIDTH=1 HEIGHT=126></TD>
    <TD COLSPAN=4> <img src="images/index_06.jpg" width=295 height=126></TD>
    </TR>
    <TR>

    <TD COLSPAN=11><a href="index.shtml"><img src="images/menu/0_navbar.gif" width="60" height="39" id="page0" border=0></a><a href="services.shtml"><img src="images/menu/1_navbar.gif" width="91" height="39" id="page1" border=0></a><img src="images/menu/2_navbar.gif" width="107" height="39" id="page3"><img src="images/menu/3_navbar.gif" width="120" height="39" id="page4"><img src="images/menu/4_navbar.gif" width="129" height="39" id="page5"><img src="images/menu/5_navbar.gif" width="104" height="39" id="page6"><img src="images/menu/6_navbar.gif" width="99" height="39"><img src="images/menu/7_navbar.gif" width="50" height="39" id="page7">
    </TD>

    <TD ROWSPAN=3 width="5">&nbsp; </TD>
    </TR>
    Last edited by dk4210; 11-04-2002 at 09:30 PM.

  • #8
    New Coder
    Join Date
    Aug 2002
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    edit 3: yeah just forget you ever saw this....tee hee...We are getting there though
    Last edited by DanHibiki; 11-05-2002 at 03:08 PM.

  • #9
    New Coder
    Join Date
    Aug 2002
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    back to the drawing board!
    Last edited by DanHibiki; 11-04-2002 at 11:59 PM.

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Posts
    103
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Cool we are getting there...

    Is this the finished code? When you said "Back to the drawing board" does that mean this code doesn't work? Please let me know.. Thanks, Dan

  • #11
    New Coder
    Join Date
    Aug 2002
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quick question. Are you going to be doing rollovers on the images. right now I have reached a dead end with the code. The problem came in with rollovers. Lets say for example that we had the home button highlighted if we rolled over it, and then off, it would reset to its original state of non-highlighted. Does that make sense? I am still working on it and have take it completely back to the drawing board. Give me some time and I will finish it up, unless of course you wont be using rollovers in which case I can post the code in a matter of minutes.

  • #12
    Regular Coder
    Join Date
    Nov 2002
    Posts
    103
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Rollover

    No, I really don't have to have mouse rollovers. I just want the image to be replaced when I go to the specific page.
    For example when I click on the link to go to the contact us page I would like to contact us button/image to be replaced with the highlighted one... I know that we have to specifiy each page in the code, but how do I do that If I have .shtml calling the differnet pages... Thanks for your help... DAN!

  • #13
    New Coder
    Join Date
    Aug 2002
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <TABLE WIDTH=756 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="0">
    <TR>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="213"> <IMG SRC="images/spacer.gif" WIDTH=213 HEIGHT=1></TD>
    <TD width="2"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    <TD width="2"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    <TD width="118"> <IMG SRC="images/spacer.gif" WIDTH=118 HEIGHT=1></TD>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="129"> <IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=1></TD>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="64"> <IMG SRC="images/spacer.gif" WIDTH=63 HEIGHT=1></TD>
    <TD width="3"> <IMG SRC="images/spacer.gif" WIDTH=3 HEIGHT=1></TD>
    <TD width="233"> <IMG SRC="images/spacer.gif" WIDTH=225 HEIGHT=1></TD>
    <TD width="5"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    </TR>
    <TR>
    <TD COLSPAN=2> <IMG SRC="images/index_01.jpg" WIDTH=214 HEIGHT=126></TD>
    <TD COLSPAN=3> <IMG SRC="images/index_02.jpg" WIDTH=122 HEIGHT=126></TD>
    <TD width="1"> <IMG SRC="images/index_03.jpg" WIDTH=1 HEIGHT=126></TD>
    <TD width="129"> <IMG SRC="images/index_04.jpg" WIDTH=129 HEIGHT=126></TD>
    <TD width="1"> <IMG SRC="images/index_05.jpg" WIDTH=1 HEIGHT=126></TD>
    <TD COLSPAN=4> <img src="images/index_06.jpg" width=295 height=126></TD>
    </TR>
    <TR>

    <TD COLSPAN=11><a href="index.shtml"><img src="images/menu/0_navbar.gif" width="60" height="39" name="page1" border=0></a><a href="services.shtml"><img src="images/menu/1_navbar.gif" width="91" height="39" name="page2" border=0></a><img src="images/menu/2_navbar.gif" width="107" height="39" name="page3"><img src="images/menu/3_navbar.gif" width="120" height="39" name="page4"><img src="images/menu/4_navbar.gif" width="129" height="39" name="page5"><img src="images/menu/5_navbar.gif" width="104" height="39" name="page6"><img src="images/menu/6_navbar.gif" width="99" height="39"><img src="images/menu/7_navbar.gif" width="50" height="39" id="page7">
    </TD>

    <TD ROWSPAN=3 width="5">&nbsp; </TD>
    </TR>
    </TABLE>
    <script>
    page = document.URL.toUpperCase();

    //instructions
    //document.****.src="********"
    //where **** is the Name given to the image in the code
    //ex: <img src="images/menu/0_navbar_over.gif" width="60" height="39" name="page1" border=0>
    //Name would be page1
    //and where ******** is the location of the secondary image
    //images/menu/1_navbar_roll.gif

    if(page.search("HEADER.HTML")>-1){
    document.page1.src="images/menu/1_navbar_roll.gif"
    }
    else if(page.search("SERVICES.SHTML")>-1){
    document.page2.src="menu2highlight.gif"
    }
    else if(page.search("SERVICES.SHTML")>-1){
    document.page3.src="menu2highlight.gif"
    }
    else if(page.search("SERVICES.SHTML")>-1){
    document.page4.src="menu2highlight.gif"
    }
    else if(page.search("SERVICES.SHTML")>-1){
    document.page5.src="menu2highlight.gif"
    }
    else if(page.search("SERVICES.SHTML")>-1){
    document.page6.src="menu2highlight.gif"
    }
    </script>

    give that a try, that should do it. you will just need to customize it to suit your needs.
    Last edited by DanHibiki; 11-05-2002 at 07:54 PM.

  • #14
    Regular Coder
    Join Date
    Nov 2002
    Posts
    103
    Thanks
    13
    Thanked 0 Times in 0 Posts

    What am I missing?

    Hey...
    Here is my code I mainly trying to get the service button to change to the 1_navbar_roll.gif when I enter the page... Please review the code.... And let me know.. Thanks again..



    +++++++++++++++++++++++++++
    <TABLE WIDTH=756 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="0">
    <TR>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="213"> <IMG SRC="images/spacer.gif" WIDTH=213 HEIGHT=1></TD>
    <TD width="2"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    <TD width="2"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    <TD width="118"> <IMG SRC="images/spacer.gif" WIDTH=118 HEIGHT=1></TD>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="129"> <IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=1></TD>
    <TD width="1"> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    <TD width="64"> <IMG SRC="images/spacer.gif" WIDTH=63 HEIGHT=1></TD>
    <TD width="3"> <IMG SRC="images/spacer.gif" WIDTH=3 HEIGHT=1></TD>
    <TD width="233"> <IMG SRC="images/spacer.gif" WIDTH=225 HEIGHT=1></TD>
    <TD width="5"> <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1></TD>
    </TR>
    <TR>
    <TD COLSPAN=2> <IMG SRC="images/index_01.jpg" WIDTH=214 HEIGHT=126></TD>
    <TD COLSPAN=3> <IMG SRC="images/index_02.jpg" WIDTH=122 HEIGHT=126></TD>
    <TD width="1"> <IMG SRC="images/index_03.jpg" WIDTH=1 HEIGHT=126></TD>
    <TD width="129"> <IMG SRC="images/index_04.jpg" WIDTH=129 HEIGHT=126></TD>
    <TD width="1"> <IMG SRC="images/index_05.jpg" WIDTH=1 HEIGHT=126></TD>
    <TD COLSPAN=4> <img src="images/index_06.jpg" width=295 height=126></TD>
    </TR>
    <TR>

    <TD COLSPAN=11><a href="index.shtml"><img src="images/menu/0_navbar.gif" width="60" height="39" name="page1" border=0></a><a href="services.shtml"><img src="images/menu/1_navbar.gif" width="91" height="39" name="page2" border=0></a><img src="images/menu/2_navbar.gif" width="107" height="39" name="page3"><img src="images/menu/3_navbar.gif" width="120" height="39" name="page4"><img src="images/menu/4_navbar.gif" width="129" height="39" name="page5"><img src="images/menu/5_navbar.gif" width="104" height="39" name="page6"><img src="images/menu/6_navbar.gif" width="99" height="39"><img src="images/menu/7_navbar.gif" width="50" height="39" id="page7">
    </TD>

    <TD ROWSPAN=3 width="5"> </TD>
    </TR>
    <script>
    page = document.URL.toUpperCase();


    //document.****.src="********"
    //where **** is the Name given to the image in the code
    //ex: <img src="images/menu/0_navbar_over.gif" width="60" height="39" name="page1" border=0>
    //Name would be page1
    //and where ******** is the location of the secondary image
    //images/menu/1_navbar_roll.gif

    if(page.search("header.shtml")>-1){
    document.page1.src="images/menu/0_navbar.gif"
    }
    else if(page.search("services.shtml")>-1){
    document.page2.src="images/menu/1_navbar_roll.gif"
    }
    </script>

  • #15
    New Coder
    Join Date
    Aug 2002
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try it out with this script in the place of the other
    <script>
    page = document.URL.toUpperCase();


    //document.****.src="********"
    //where **** is the Name given to the image in the code
    //ex: <img src="images/menu/0_navbar_over.gif" width="60" height="39" name="page1" border=0>
    //Name would be page1
    //and where ******** is the location of the secondary image
    //images/menu/1_navbar_roll.gif

    if(page.search("HEADER.SHTML")>-1){
    document.page1.src="images/menu/0_navbar.gif"
    }
    else if(page.search("SERVICES.SHTML")>-1){
    document.page2.src="images/menu/1_navbar_roll.gif"
    }
    </script>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •