Keeping buttons stay a different colour after being selected

[Tristán White]

Hi there, this'll be an easy one I'm sure. I have a small question that will
take a second to answer, I am sure.

If you go to
http://snipurl.com/t821
All the buttons on the left are red, and when the mouse hovers over them,
they go green.

How do I make it so that the buttons stay on green (or indeed any other
colour) after being selected? So that the visitor knows which page he or she
is on?

(OH ignore the layout of the actual site... I know it's in yucky tables at
the moment, but all the sections will be copied and pasted into CSS includes
etc next week, and the site will look much more professional).

Each "cell" in the menu is like this:

<!-- Begin Cell 1 -->

<td nowrap="nowrap" bgcolor="#ff0000"
onmouseover="this.style.background='#00ff00'; this.style.color='#000000'"
onmouseout="this.style.background='#ff0000'; this.style.color=''"
style="font-weight: bold; color: ; font-family: Arial,sans-serif;font-size:
14pt; text-align: center;cursor: hand;" height="15"
onclick="window.location.href='http://www.cardaid.co.uk/catalog/includes/lan
guages/english/ecardsite/ecarddefault.html';" title="ABOUT">ABOUT</td>

<!-- End Cell 1 -->


I am assuming that there is another onmouse event handler I can set for
this quite common requirement, but I can't for the life of me think of it.

 

[Tristán White]

Hmmm, come to think of it, perhaps I should just add
this.style.background='#00ff00'; this.style.color='#000000'
to the onclick? As in

<td nowrap="nowrap" bgcolor="#ff0000"
onmouseover="this.style.background='#00ff00'; this.style.color='#000000'"
onmouseout="this.style.background='#ff0000'; this.style.color=''"
style="font-weight: bold; color: ; font-family: Arial,sans-serif;font-size:
14pt; text-align: center;cursor: hand;" height="15"
onclick="window.location.href='http://www.cardaid.co.uk/catalog/includes/lan
guages/english/ecardsite/ecarddefault.html';
this.style.background='#00ff00'; this.style.color='#000000';"
title="ABOUT">ABOUT</td>


But there again, even when it's in a CSS, how will the *next* page that
reopens, ie ecarddefault.html, know what the previous onclick is? Since the
column with the menu will be "included" again, ie a new include, not the
same one.

(with frames, yes, I could make the colour stay green on onclick because the
frame would be static, it wouldn't be reloaded, the new stuff would simply
be loaded into the other frame. But with CSS it's not going to be the case,
is it?

 

[web.dev]

But there again, even when it's in a CSS, how will the *next* page that
reopens, ie ecarddefault.html, know what the previous onclick is? Since the
column with the menu will be "included" again, ie a new include, not the
same one.

(with frames, yes, I could make the colour stay green on onclick because the
frame would be static, it wouldn't be reloaded, the new stuff would simply
be loaded into the other frame. But with CSS it's not going to be the case,
is it?

Obviously, as you already know, as soon as you navigate to the next
page, all your css tricks will be useless as css can't be used for
persistence. There are a couple of solutions that are known that I can
think of right now to keep a menu persistent.

1. Frames
As you've already guessed.

2. IFrames
....

3. Create multiple files for each menu item.
This implies that you create a page for which the menu item is red and
a page for a situation when it is green. Obviously, maintenance will
easily become chaotic. (don't recommend)

4. Use cookies.
If you use javascript to manage your cookies, then obviously a downside
to it is that it won't work if your users have javascript turned off or
don't accept cookies. If you were to use cookies, a server-side
solution would be a better approach.

5a. Place all content into one page.
You use javascript to hide and unhide content depending on the menu
item selected. The downside of this is if the users have javascript
turned off, they see all the content. Also, your page size will be
big. (don't recommend)

5b. AJAX.
This is a derivative of the above. Instead of placing all content into
one page, you'll retrieve only the content that you need. Again,
you'll need to think of what happens if javascript is turned off.

There are probably other methods, but I cannot think of anymore. Hope
this helps you to innovate different ideas.

 

[Jeremy]

Hi there, this'll be an easy one I'm sure. I have a small question that will
take a second to answer, I am sure.

If you go to
http://snipurl.com/t821
All the buttons on the left are red, and when the mouse hovers over them,
they go green.

How do I make it so that the buttons stay on green (or indeed any other
colour) after being selected? So that the visitor knows which page he or she
is on?

(OH ignore the layout of the actual site... I know it's in yucky tables at
the moment, but all the sections will be copied and pasted into CSS includes
etc next week, and the site will look much more professional).

Each "cell" in the menu is like this:

<!-- Begin Cell 1 -->

<td nowrap="nowrap" bgcolor="#ff0000"
onmouseover="this.style.background='#00ff00'; this.style.color='#000000'"
onmouseout="this.style.background='#ff0000'; this.style.color=''"
style="font-weight: bold; color: ; font-family: Arial,sans-serif;font-size:
14pt; text-align: center;cursor: hand;" height="15"
onclick="window.location.href='http://www.cardaid.co.uk/catalog/includes/lan
guages/english/ecardsite/ecarddefault.html';" title="ABOUT">ABOUT</td>

<!-- End Cell 1 -->


I am assuming that there is another onmouse event handler I can set for
this quite common requirement, but I can't for the life of me think of it.

Why not just use regular HTML links (<a href="..">) for your menu items,
and use CSS on the a:visited pseudoelement to make them have a different
background color?

 

[Tristán White]

Why not just use regular HTML links (<a href="..">) for your menu items,
and use CSS on the a:visited pseudoelement to make them have a different
background color?

Because then if people visit more than two pages on the site - as I hope
they will - they will get very confused as there will be more than one page
with different background colours.

 

[Tristán White]

Thanks for your considered reply. The problem is going to be what happens
when Javascript/cookies are turned off, and as you say, multiple files will
make site maintenance a major PITA!

I might do a look into our stats to find out whether there is a graphic
showing how many of our visitors have cookies turned off.... If it's
miniscule, this may be the way forward. But somehow I think, in this day and
age of adware and whatnot, quite a lot of people have these things disabled.

I can't believe the much maligned frames are the best way of rendering this
properly!! I must find another solution. I'll have a browse around other
websites to see how they do it.

I guess one thing I could do would be to include instead an arrow in the
main part of the document (post CSS implementation) pointing to the relevant
part of the menu on the left hand side.

However, the two 'columns' don't always align in the same way depending on
the browsers. I've tried Firefox, Safari and IE and on all of them there is
a milimetre or two difference, depending also on screen size settings etc.
So this may be more trouble than it's worth. But at least, if I could
somehow fix it so that the two columns would ALWAYS be aligned equally no
matter what browser or screensize, then it could be a solution.

 

[Kevin Darling]

I can't believe the much maligned frames are the best way of rendering this
properly!! I must find another solution. I'll have a browse around other
websites to see how they do it.

Personally, I love frames for this purpose. They're the easiest way to
keep context between pages. Okay, but without them... let's see...

But there again, even when it's in a CSS, how will the *next* page that
reopens, ie ecarddefault.html, know what the previous onclick is? Since the
column with the menu will be "included" again, ie a new include, not the
same one.

Hmm... the sheer fact that each button calls a specific page, means
that page knows which button to highlight, doesn't it?

Confused, Kev

 

[Jeremy]

Because then if people visit more than two pages on the site - as I hope
they will - they will get very confused as there will be more than one page
with different background colours.

I apologize; I was confused about what you wanted.

First of all, you should still be using HTML links here instead of using
javascript. If you need the links to have a set width and height, you
can use CSS to accomplish this. Using javascript as your only means of
navigation is a bad idea.

Next, when you have links instead of just table cells, you can iterate
through them and compare their href to document.location using some
comparison scheme to determine which of the linked pages you are
currently on. Then, you can either alter that link's CSS class, or
modify its background-color (the former is a better way).

Jeremy