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.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trouble with frames

    Ok, I found how to make two frames change with one button. That wasn't too bad. Here's the tricky part. How do I do that same function with more than one button in my nav bar? Here is what I have so far.

    Code:
    <script type="text/javascript">
    <!--
    var images = [ // list images
    ["../Images/TOC/Home1.bmp","../Images/TOC/Home2.bmp","../Images/TOC/Home3.bmp"], // link 1
    ["../Images/TOC/Ensembles1.bmp","../Images/TOC/Ensembles2.bmp","../Images/TOC/Ensembles3.bmp"], // link 2
    ["../Images/TOC/Directors1.bmp","../Images/TOC/Directors2.bmp","../Images/TOC/Directors3.bmp"], // link 3
    ["../Images/TOC/Calendar1.bmp","../Images/TOC/Calendar2.bmp","../Images/TOC/Calendar3.bmp"], //link 4
    ["../Images/TOC/RS1.bmp","../Images/TOC/RS2.bmp","../Images/TOC/RS3.bmp"], //link 5
    ["../Images/TOC/NMS1.bmp","../Images/TOC/NMS2.bmp","../Images/TOC/NMS3.bmp"], //link 6
    ["../Images/TOC/Resources1.bmp","../Images/TOC/Resources2.bmp","../Images/TOC/Resources3.bmp"], //link 7
    ["../Images/TOC/History1.bmp","../Images/TOC/History2.bmp","../Images/TOC/History3.bmp"], //link 8
    ["../Images/TOC/Boosters1.bmp","../Images/TOC/Boosters2.bmp","../Images/TOC/Boosters3.bmp"] //link 9
    ]
    
    var preloadImages=new Array() // preloads images
    for(var i=0;i<images.length;i++) {
    preloadImages[i]=new Array()
    for(var j=0;j<images[i].length;j++){
    preloadImages[i][j]=new Image()
    preloadImages[i][j].src=images[i]
    }
    }
    
    lastN = ""
    lastPic=""
    
    function mOver(obj,num){
    if(lastN != obj.name){
    document.images[obj.name].src = images[num][1]
    }
    }
    
    function mOut(obj,num){
    if(lastN != obj.name){
    document.images[obj.name].src = images[num][0]
    }
    }
    
    function mActive(obj,num){
    document.images[obj.name].src = images[num][2]
    if (lastN != "" && lastN != obj.name){
    document.images[lastN].src = lastPic
    }
    lastN = obj.name
    lastPic=images[num][0]
    }
    
    // -->
    </script> 
    <SCRIPT language="JavaScript">
    <!----hide
    function change2()
    {
    parent.TOC.location="../TOCpages/TOC-ensembles.html";
    parent.Main.location="../Ensembles.html";
    }
    //------>
    </SCRIPT>
    
    <body>
    <a href="../Home.html" target="Main"><img src="../Images/TOC/Home1.bmp"  border="0"name="img0" onmouseover="mOver(this,0)" onmouseout="mOut(this,0)" onclick="mActive(this,0)"></a><br>
    <a href="javascript:change2()"><img src="../Images/TOC/Ensembles1.bmp" border="0" name="img1" onmouseover="mOver(this,1)" onmouseout="mOut(this,1)" onclick="mActive(this,1)"></a><br>
    <a href="../Directors.html" target="Main"><img src="../Images/TOC/Directors1.bmp" border="0" name="img2" onmouseover="mOver(this,2)" onmouseout="mOut(this,2)" onclick="mActive(this,2)"></a><br>
    <a href="../Calendar.html" target="Main"><img src="../Images/TOC/Calendar1.bmp" border="0" name="img3" onmouseover="mOver(this,3)" onmouseout="mOut(this,3)" onclick="mActive(this,3)"></a><br>
    <a href="../RS.html" target="Main"><img src="../Images/TOC/RS1.bmp" border="0" name="img4" onmouseover="mOver(this,4)" onmouseout="mOut(this,4)" onclick="mActive(this,4)"></a><br>
    <a href="../NMS.html" target="Main"><img src="../Images/TOC/NMS1.bmp" border="0" name="img5" onmouseover="mOver(this,5)" onmouseout="mOut(this,5)" onclick="mActive(this,5)"></a><br>
    <a href="../Resources.html" target="Main"><img src="../Images/TOC/Resources1.bmp" border="0" name="img6" onmouseover="mOver(this,6)" onmouseout="mOut(this,6)" onclick="mActive(this,6)"></a><br>
    <a href="../History.html" target="Main"><img src="../Images/TOC/History1.bmp" border="0" name="img7" onmouseover="mOver(this,7)" onmouseout="mOut(this,7)" onclick="mActive(this,7)"></a><br>
    <a href="../Boosters.html" target="Main"><img src="../Images/TOC/Boosters1.bmp" border="0" name="img8" onmouseover="mOver(this,8)" onmouseout="mOut(this,8)" onclick="mActive(this,8)"></a><br>
    <br>
    What do I need to add to the script to help it identify which button was selected and which two pages to load in the correct frames?

    Let's say, when I click my Resources button, my TOC frame changes to TOC-resources.html and my Main frame changes to resources.html. Any suggestions would be great.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    A function is not necessary.
    Code:
    <a href="../TOCpages/TOC-ensembles.html" target="TOC" onclick="window.open('../Ensembles.html', 'Main');"><img src="../Images/TOC/Ensembles1.bmp" border="0" name="img1" onmouseover="mOver(this,1)" onmouseout="mOut(this,1)" onclick="mActive(this,1)"></a>

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    WOW, fantastic. Thanks so much glenn.


  •  

    Posting Permissions

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