Solved

Using a frame set but can't get the buttons to stay active when clicked...

Posted on 2004-08-04
28
205 Views
Last Modified: 2010-04-06
I have a simple menu that I am using to navigate through my document management system.  There are four menu buttons that i'm using and the designer gave me four button images to use.  It looks like she used Dreamweaver to generate the buttons so they would have a mouseover affect.  It looks nice but the problem is when I click on a button and then take the mouse away the button goes back to looking like all the other buttons.   I really need the button to stay the same color when it is clicked and then if another button is clicked it should set all the other buttons to the non-active image and keep the clicked button as the active image.  I've done this before by using a URL variable but since the buttons are in the top frame the frame isn't refreshed (that is the point so I don't have to reload the menu everytime).  Does anyone know how to keep a image active after it has been clicked and how to change the other images at the same time?  I'm thinking I could use javascript for this but I can't figure out how to do it.  Any suggestions are welcome.  I guess I could refresh the top frame also but then I might as well redesign the whole site.  Thanks for any help!  I can post my code if needed.
0
Comment
Question by:Ike23
  • 13
  • 12
  • 2
28 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11722478
Hi

Yes, it would probably be best to post your top frame code and any other external files you feel are necessary

Regards,
Zyloch
0
 
LVL 6

Assisted Solution

by:viola123
viola123 earned 100 total points
ID: 11722675
that's the code you need, but you have to make a little modification to fit your case.
your main page should have two frames, one is topFrame for your menu, the other one should be the mainFrame, which displays the content
      <frameset rows="70,*,34" cols="*" frameborder="NO" border="0" framespacing="0">
            <frame src="menu.htm" name="topFrame" scrolling="NO" noresize>
            <frame src="main.htm" name="mainFrame" scrolling="no" noresize>
      </frameset>


the code below should be put in your menu.htm:

/////////////////////put this function in the <head> part of your top menu frame//////////////////////////////////////
            function setMenu(anchor,choice){
                  var oButton = document.getElementById("button"+anchor.id);
                  
                  if (choice == "over")
                        oButton.src='active.bmp';
                  else if (choice == "out")
                        oButton.src='inactive.bmp';
                  else if (choice == "click"){
                        anchor.onmouseout="";
                        oButton.src='active.bmp';
                  }
            
            }


///////////////////////// this could be your menu body code//////////////////////////////////////////////////////
                  <TABLE id="Table1" height="8" cellSpacing="1" cellPadding="1" width="411" border="0">
                        <TR>
                              <TD><a id="1" href="http://www.cnn.com" onmouseover="setMenu(this,'over')" onmouseout="setMenu(this,'out')" onclick="setMenu(this,'click')" target="mainFrame"><IMG id="button1" src="inactive.bmp" border=0></a></TD>
                              <TD><a id="2" href="http://www.bbc.co.uk" onmouseover="setMenu(this,'over')" onmouseout="setMenu(this,'out')" onclick="setMenu(this,'click')"><IMG id="button2" src="inactive.bmp" border=0></a></TD>
                              <TD><a id="3" href="http://www.talman.com.au" onmouseover="setMenu(this,'over')" onmouseout="setMenu(this,'out')" onclick="setMenu(this,'click')"><IMG id="button3" src="inactive.bmp" border=0></a></TD>
                        </TR>
                  </TABLE>
0
 
LVL 4

Author Comment

by:Ike23
ID: 11727588
That works pretty well except for one thing.  Once I click a button and move the mouse it stays as the active image which is good.  But when I click another menu button that button becomes the active image and the old active image stays the same also.  If I click on all four menu buttons then they all will appear to be the active image.  I need a way to set all non-clicked buttons to their non-active image.  Does that make sense?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11728731
Give all your menu images the same name. Then, change this part:

else if (choice == "click"){
                    anchor.onmouseout="";
                    oButton.src='active.bmp';
               }

to

else if (choice == "click"){
                    var mnuimgs = document.getElementsByName('NAME_OF_YOUR_IMAGES');
                    for (var i=0;i<mnuimgs.length;i++) {
                       mnuimgs[i].src='inactive.bmp';
                    }
                    anchor.onmouseout="";
                    oButton.src='active.bmp';
               }


Regards,
${Zyloch}
0
 
LVL 4

Author Comment

by:Ike23
ID: 11729292
That will almost work except that the inactive buttons all have different images so just using one image like inactive.bmp will not work.  I actually created four seperate functions using one for each button.  Now I can loop through my button names but I get an error.  I think it is because I am not calling the image correctly from the array.  Here's my first function:

function setMenu1(anchor,choice){
               var oButton = document.getElementById("button"+anchor.id);
               
               if (choice == "over")
                    oButton.src='/images/menu_home_active.gif';
               else if (choice == "out")
                    oButton.src='/images/menu_home.gif';
               else if (choice == "click"){
                    var mnuimgs = document.getElementsByName('Home,Clients,Gallatin,Directory');
                     {
                   mnuimgs['Home'].src='/images/menu_home.gif'; mnuimgs['Clients'].src='/images/menu_Clients.gif'; mnuimgs['Gallatin'].src='/images/menu_gallatin.gif'; mnuimgs['Directory'].src='/images/menu_directory.gif';
                    }
                              
                    anchor.onmouseout="";
                    oButton.src='/images/menu_home_active.gif';
               }

         
          }

Here's the menu code:

<a href="home_start.cfm" id="1"  target="body" onmouseover="setMenu1(this,'over')" onmouseout="setMenu1(this,'out')" onclick="setMenu1(this,'click')" ><img id="button1" src="/images/menu_home.gif" name="Home" alt="menu_home" border="0" ></a>


This gives an error 'Home' is null or not an object.  Thanks for any feedback, I think I almost have it!
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11729503
Sure, add this line before

{
if (document.images) {
mnuimgs = document.images;
mnuimgs['Home'].src='/images/menu_home.gif'; mnuimgs['Clients'].src='/images/menu_Clients.gif'; mnuimgs['Gallatin'].src='/images/menu_gallatin.gif'; mnuimgs['Directory'].src='/images/menu_directory.gif';
}
}

0
 
LVL 4

Author Comment

by:Ike23
ID: 11730267
That is really close to working!  Thanks for your help.  The only problem now is that if I click a button it will not respond to the mouseout the next time I click another button.  So if I click home it will reset all the other buttons fine.  But if I click Directory and then mouseover the Home button it stays as the active image I think because I had already clicked it once.  Here's the code that I have now:

function setMenu1(anchor,choice){
               var oButton = document.getElementById("button"+anchor.id);
               
               if (choice == "over")
                    oButton.src='/gg/images/menu_home_active.gif';
               else if (choice == "out")
                    oButton.src='/gg/images/menu_home.gif';
               else if (choice == "click"){
                   // var mnuimgs = document.getElementsByName('Home,Clients,Gallatin,Directory');
      {
      mnuimgs = document.images;
      mnuimgs['Home'].src='/gg/images/menu_home.gif'; mnuimgs['Clients'].src='/gg/images/menu_Clients.gif'; mnuimgs['Gallatin'].src='/gg/images/menu_gallatin.gif'; mnuimgs['Directory'].src='/gg/images/menu_directory.gif';
      }

                              
                    anchor.onmouseout="";
                    oButton.src='/gg/images/menu_home_active.gif';
               }
         
          }

Thanks again!
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731824
As expected. The only reason I didn't mention that was that my computer was in danger of freezing (going at the pace of a snail. I finally figured I had to disable indexing heh).

mnuimgs = document.images;
     mnuimgs['Home'].src='/gg/images/menu_home.gif'; mnuimgs['Clients'].src='/gg/images/menu_Clients.gif'; mnuimgs['Gallatin'].src='/gg/images/menu_gallatin.gif'; mnuimgs['Directory'].src='/gg/images/menu_directory.gif';

mnuimgs['Home'].onmouseout = "CODE"
mnuimgs['Clients'].onmouseout = "CODE"
etc.etc

Regards,
${Zyloch}
0
 
LVL 4

Author Comment

by:Ike23
ID: 11731903
I'm not sure what "CODE" to put in there but I tried this and it still doesn't totally work:  It does work until I go to a button that has already been clicked once and then the onmouseout still shows the active image.  It must be something to do with how the script is setting the src when it is clicked.  I click on Home and everything works.  Then I click on Clients and it works again.   But if I mouseover Home again and leave the Home button still shows the active state...

function setMenu1(anchor,choice){
               var oButton = document.getElementById("button"+anchor.id);
               
               if (choice == "over")
                    oButton.src='/gg/images/menu_home_active.gif';
               else if (choice == "out")
                    oButton.src='/gg/images/menu_home.gif';
               else if (choice == "click"){
                   // var mnuimgs = document.getElementsByName('Home,Clients,Gallatin,Directory');
                              {
                              mnuimgs = document.images;
                               mnuimgs['Home'].src='/gg/images/menu_home.gif';
                              mnuimgs['Home'].onmouseout = mnuimgs['Home'].src='/gg/images/menu_home.gif'; mnuimgs['Clients'].src='/gg/images/menu_Clients.gif';
                              mnuimgs['Clients'].onmouseout = mnuimgs['Clients'].src='/gg/images/menu_Clients.gif'; mnuimgs['Gallatin'].src='/gg/images/menu_gallatin.gif';
                              mnuimgs['Gallatin'].onmouseout = mnuimgs['Gallatin'].src='/gg/images/menu_gallatin.gif'; mnuimgs['Directory'].src='/gg/images/menu_directory.gif';
                              mnuimgs['Directory'].onmouseout = mnuimgs['Directory'].src='/gg/images/menu_directory.gif';
                              }

                              
                    anchor.onmouseout="";
                    oButton.src='/gg/images/menu_home_active.gif';
               }

         
          }


<a href="home_start.cfm" id="1"  target="body" onmouseover="setMenu1(this,'over')" onmouseout="setMenu1(this,'out')" onclick="setMenu1(this,'click')" ><img id="button1" src="/gg/images/menu_home.gif" name="Home" alt="menu_home" border="0" ></a>

I may just screw the onmouseover and just have the button turn color once it is clicked.  I would love to get this solved though.  It seems like it is something small.  I'll up the points a little.  Thanks for all your help so far!
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11731934
Let's see. Have this below mnuimgs = document.images;

mnuimgs['Home'].src='/gg/images/menu_home.gif';
['Directory'].src='/gg/images/menu_directory.gif';
mnuimgs['Home'].onmouseout = setMenu1(mnuimgs['Home'],'out'); mnuimgs['Clients'].src='/gg/images/menu_Clients.gif';
                         mnuimgs['Clients'].onmouseout = setMenu1(mnuimgs['Clients'],'out'); mnuimgs['Gallatin'].src='/gg/images/menu_gallatin.gif';
                         mnuimgs['Gallatin'].onmouseout = setMenu1(mnuimgs['Gallatin'],'out'); mnuimgs['Directory'].src='/gg/images/menu_directory.gif';
                         mnuimgs['Directory'].onmouseout = setMenu1(mnuimgs['Directory'],'out');

Regards
0
 
LVL 6

Expert Comment

by:viola123
ID: 11732411
hi, Ike23:

you don't have to use difference pictures for difference menus. what you need is only two menu pictures: one for active and the other one for inactive.

the text on each menu button could be implemented using <div> tag

wish it helpful and good on you

regards
viola123
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11735523
Ike23. I've just thought of something. While it should work now, there's something you can do, if just for reference later.

If you have a browser that has an image, and you want to modify it, you can use IE-only filters, check on this page: http://webmonkey.wired.com/webmonkey/97/33/index1a.html?tw=authoring

For the Alpha filter you'll find, you can emulate in Mozilla by doing
-moz-opacity:0.5; opacity:0.5;      where 0.5 stands for 50%

Regards,
${Zyloch}
0
 
LVL 4

Author Comment

by:Ike23
ID: 11736847
I need to use the different pictures because a designer gave them to me and will complain about how the text "does not look as smooth" if I use text.  I'm not sure what the Alpha filter would do exactly...  I was looking at the code again and was wondering if this might be the reason that after a button is clicked the onmouseout doesn't work after another button is clicked.

                    anchor.onmouseout=""
                    oButton.src='#menuimg_active#';

Doesn't that cause the current button to be active and when you mouseout it stays active?  But when I click a different button and then mouseover the original it still has onmouseout="" i think.  Doesn that make sense?  Should I try and make a virtual directory for you guys to see or is this just a limitation of using frames?
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 4

Author Comment

by:Ike23
ID: 11736911
I just thought of something simple that I need to do.  When the page is initially loaded I would like the Home button to appear as active since that is the page that comes up by default.  Would I do some code in the <body onload=""> tag?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11736973
You are right. The reason it's not working onmouseout is because the viola's code sets onmouseout to be null. What I used can be called a simple "hack" in that after you click another button, all the other buttons regain their onmouseout. Another option would be to use onmouseup on the buttons to set the onmouseouts again, but onmoueup might not be as widely supported.

Yes. you can set it with the body onload tag, something like this:
<body onload="setMenu1('1','click');">
(If you changed the anchor '1', you might have to change that.)

Regards,
0
 
LVL 4

Author Comment

by:Ike23
ID: 11737109
I get an error 'null' is null or not an object.  What does the '1' reference the id of the anchor tag or the image itself?  This is what the code in the anchor tag says: onclick="setMenu1(this,'click')"  .  When I put 'Home' there instead it still gives this error?  Thanks.

What I really wanted is a simple hack or whatever just to reset all the non-clicked buttons to their non-active states and keep the active button in it's active state.  How would I do this with the same image?  Would I use it as a background image and then have text over the top of it?  I tried something like this with CSS and links but the active property didn't do what I wanted.  
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 300 total points
ID: 11737586
Well, these things with rollovers can get confusing. Let's start at the beginning again. Have these functions. (here I commented out the lines of the original that I feel you don't need)

//Set the names or ids of each image you use in the menu
var myImgs = new Array;
myImgs[0] = "Home";
myImgs[1] = "Clients";
//etc.etc.

//Set the 'off' src of each of the menu images corresponding to the array above.
var myImgOffSrc = new Array;
myImgOffSrc[0] = "/gg/images/menu_home.gif";
myImgOffSrc[1] = "/gg/images/menu_Clients.gif";
//etc.etc.

function setMenu(anchor,newImg){
               //var oButton = document.getElementById("button"+anchor.id);
               var oButton = anchor;              
               oButton.src=newImg;
}

function setClick(anchor,arrayOfImages, arrayOfOffUrls) {
   for (var i=0;i<arrayOfImages.length;i++) {
      document.images[arrayOfImages[i]].onmouseout = "setMenu(this,"+arrayOfOffUrls[i]+");"
   }
   anchor.onmouseout = "";
}


Now, in the <body> section, for example, one of your images would look like this:

<a href="home_start.cfm"  target="body" onmouseover="setMenu(document.images['Home'],'gg/images/menu_home_active.gif');" onmouseout="setMenu(document.images['Home'],'/gg/images/menu_home.gif')" onclick="setClick(document.image['Home'],myImgs,myImgOffSrc)" ><img id="button1" src="/gg/images/menu_home.gif" name="Home" alt="menu_home" border="0"></a>

Note several things about the above:
1) The name for the image happens to be Home. This is important.

2) I changed all the functions to a single setMenu function. You need to provide the IMAGE, hence the document.images['IMG_NAME']. You also need to provide the URL. For the onmouseover, you want the new URL for the up state, for onmouseout, you use the URL for the down state. This simplifies things.

3) Note that onclick now uses setClick function which uses the two arrays you defined above the functions.

Regards,
0
 
LVL 4

Author Comment

by:Ike23
ID: 11743196
OK I put the code in like this but now I'm right back to where I started because the button doesn't stay active once it is clicked.  This is exactly how I had it before just with different javascript that Dreamweaver created.  Here's what I have now:


<script>

var myImgs = new Array;

myImgs[0] = "Home";

myImgs[3] = "Clients";

myImgs[1] = "Gallatin";

myImgs[2] = "Directory";


var myImgOffSrc = new Array;

myImgOffSrc[0] = "/gg/images/menu_home.gif";

myImgOffSrc[3] = "/gg/images/menu_Clients.gif";

myImgOffSrc[1] = "/gg/images/menu_gallatin.gif";

myImgOffSrc[2] = "/gg/images/menu_directory.gif";



function setMenu(anchor,newImg){
               //var oButton = document.getElementById("button"+anchor.id);
               var oButton = anchor;              
               oButton.src=newImg;
}


function setClick(anchor,arrayOfImages, arrayOfOffUrls) {
   for (var i=0;i<arrayOfImages.length;i++) {
      document.images[arrayOfImages[i]].onmouseout = "setMenu(this,"+arrayOfOffUrls[i]+");"
   }
   anchor.onmouseout = "";
}


</script>

<a href="client_start.cfm"  target="body" onmouseover="setMenu(document.images['Clients'],'/gg/images/menu_Clients_active.gif');" onmouseout="setMenu(document.images['Clients'],'/gg/images/menu_Clients.gif')" onclick="setClick(document.image['Clients'],myImgs,myImgOffSrc)" ><img id="button4" src="/gg/images/menu_Clients.gif" name="Clients" alt="" border="0"></a>


Do I need to do a setClick function for each button?  I think I could settle for having the buttons just stay active once clicked if I could get the Home button to appear as active once the page is loaded...
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11743981
Well, I think you need the setClick function in each of them. I just noticed:
document.image['Clients']
should be:
document.images['Clients']
0
 
LVL 4

Author Comment

by:Ike23
ID: 11744105
Well I'm not sure if this is going to work so I'd rather just get the Home button to show up as the default when the page loads and use the code that we had before since it at least causes the active button to stay active after it is clicked.  I set up the example code here to illustrate what I mean about the current code you sent me.

http://leveragewebsites.com/banner/bannerexample.htm

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11744144
You can try several things.

1) On your <body> onload, change it to
onload="setMenu(document.images['Home'],'/gg/images/menu_home_active.gif');"

Most likely, you'd want the Home Button to have no onmouseout code since you want it to stay active. If so, do this:

onload="setMenu(document.images['Home'],'/gg/images/menu_home_active.gif');document.images['Home'].parentElement.onmouseout='';"

This should work in all recent browsers.

2) I have figured out what was wrong with my code.

function setClick(anchor,arrayOfImages, arrayOfOffUrls) {
   for (var i=0;i<arrayOfImages.length;i++) {
      document.images[arrayOfImages[i]].parentElement.onmouseout = "setMenu(this,"+arrayOfOffUrls[i]+");"
   }
   anchor.parentElement.onmouseout = "";
}
0
 
LVL 4

Author Comment

by:Ike23
ID: 11744179
Now we're back to the second problem... when I mouseout the image stays...  Should I post the code that works?  I just need to find out how to set the home button as active when the page loads and then I will just forget about having the change happen when on the mouseover.  Unless you can figure out the next step.  Thanks for all your help!
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11744219
I believe I should be able to figure this out (just give me a few posts). First of all, are you updating bannerexample.htm with what I'm telling you? This'll probably make it easier for me.

Another suggestion is to move all your <script> code in bannerexample.htm into the <head> section.

Finally, let me get this straight:

You want the image to stay as onmouseover image when you click it since the top part will be a frame.
You want the Home image to be active when the frame is first loaded.

The above should fix that. Just to let you know, if you didn't use images at all, the whole thing might've been a lot simpler with only CSS, but that's that. If you ever, in the future, want to switch your menu into CSS, we can help you. Also, some more food for thought: What if the user loads the first page as about_us.html or whatever it's called? The Home button will still be active.
0
 
LVL 4

Author Comment

by:Ike23
ID: 11744339
I am updating the banner example page with your suggestions: http://leveragewebsites.com/banner/bannerexample.htm

We are right back to where we were with the other code...  I did try CSS real quick but couldn't get the active anchor to stay active...  If you have that code handy I would love to take a look.  The only problem is that the designer gave me these buttons and said that the text "doesn't look as smooth" when I used CSS.  

I won't really have to worry about anyone loading a different page since the menu doesn't refresh.
0
 
LVL 4

Author Comment

by:Ike23
ID: 11884152
I still would like to have the Home button selected on the first page load or whenever the whole site is refreshed...  I'm just using the code that will show the active button after it has been clicked but there is no onmouseover functionality.  I could't get the onload="" to set the button to active yet.
0
 
LVL 4

Author Comment

by:Ike23
ID: 11884192
Oh yeah, here's the code I'm using:

function setMenu1(anchor,choice){
               var oButton = document.getElementById("button"+anchor.id);
               
               if (choice == "over")
                    oButton.src='/gg/images/menu_home_active.gif';
               else if (choice == "out")
                    oButton.src='/gg/images/menu_home.gif';
               else if (choice == "click"){
                   // var mnuimgs = document.getElementsByName('Home,Gallatin,Clients,Directory');
      {
            mnuimgs = document.images;
                              
            mnuimgs['Home'].src='/gg/images/menu_home.gif';
                              
            mnuimgs['Gallatin'].src='/gg/images/menu_gallatin.gif';
                              
            mnuimgs['Clients'].src='/gg/images/menu_Clients.gif';
                              
            mnuimgs['Directory'].src='/gg/images/menu_directory.gif';
                              
      }
                              
                              
                    anchor.onmouseout=""
                    oButton.src='/gg/images/menu_home_active.gif';
               }


<a href="home_start.cfm" id="1"  target="body" onmouseout="setMenu1(this,'out')" onclick="setMenu1(this,'click')" ><img id="button1" src="/gg/images/menu_home.gif" name="Home"  border="0" ></a>
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11884206
Ack, sorry about not replying, must've deleted your email by accident. Give me a little time and let me reacqaint myself with your code again.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now