Changing the look of a button when pushed.

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Hi,
I want to know how I can change a button so that it displays a different
color when pressed on a frames page. I would be nice to tell what page was
being displayed. Any ideas?
Thanks for your help!
Dre
 
Try interactive buttons, if you're using FP2003.

Otherwise use "image swaps" in FP 2002

Look up (both or either) of these in Frontpage Help.
 
Thanks. I tried the interactive buttons and can get them to change
appearance when the mouse/cursor is positioned over it but not change when
the button is clicked. Let me know if I am missing something. Otherwise I
will try the image swaps. Thanks for your help!

Dre
 
You are correct
- Interactive buttons Do not have that state (stay changed after click)

--




| Thanks. I tried the interactive buttons and can get them to change
| appearance when the mouse/cursor is positioned over it but not change when
| the button is clicked. Let me know if I am missing something. Otherwise I
| will try the image swaps. Thanks for your help!
|
| Dre
|
| "Andrew Murray" wrote:
|
| > Try interactive buttons, if you're using FP2003.
| >
| > Otherwise use "image swaps" in FP 2002
| >
| > Look up (both or either) of these in Frontpage Help.
| >
| > | > > Hi,
| > > I want to know how I can change a button so that it displays a different
| > > color when pressed on a frames page. I would be nice to tell what page
| > > was
| > > being displayed. Any ideas?
| > > Thanks for your help!
| > > Dre
| >
| >
| >
 
This is easiest when using text links.
Set a style for the links, including the Active state of the links. When
clicked the page will load in the main frame as usual, but the link in the
links frame will take on the colour for an Active link.

Place this between <head> and </head> in the links page, in code or html
view:

<style type="text/css">
a:link {color: blue; text-decoration: none;}
a:visited {color: purple; text-decoration: none;}
a: active {color: red; text-decoration: underline;}
a:hover {color: green; text-decoration: underline;}
</style>

When using Interactive buttons you can still indicate tyhe active page, but
it's a lot more complex.
The usual IB is depicted in code view as

<a href="index.html"><img border="0" id="img3" src="images/button2C.gif"
height="20" width="100" alt="Home" fp-style="fp-btn: Soft Capsule 10;
fp-font-style: Bold; fp-font-size: 8; fp-transparent: 1" fp-title="Home"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button2D.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2C.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button2E.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2D.gif')"></a>

From this, remove the
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2D.gif')"
bit
This leaves the button in the pressed state when a link is clicked. Good so
far. But when another link is pressed, the button does not revert to the
normal state.

Now you need to add an image swap behaviour that restores the original
unpressed state to every other button when it is clicked. This has to be
done for every button in the navigation bar. That, in my opinion, is a lot
of effort for such a limited return.
The same applies to using other image swaps (since that is all IBs use).

You can make very attractive buttons using CSS and text links. Start at
http://www.htmlcenter.com/tutorials/tutorials.cfm/154/CSS/
for an example.
 
THANK YOU! I will try it.

Dre

Ronx said:
This is easiest when using text links.
Set a style for the links, including the Active state of the links. When
clicked the page will load in the main frame as usual, but the link in the
links frame will take on the colour for an Active link.

Place this between <head> and </head> in the links page, in code or html
view:

<style type="text/css">
a:link {color: blue; text-decoration: none;}
a:visited {color: purple; text-decoration: none;}
a: active {color: red; text-decoration: underline;}
a:hover {color: green; text-decoration: underline;}
</style>

When using Interactive buttons you can still indicate tyhe active page, but
it's a lot more complex.
The usual IB is depicted in code view as

<a href="index.html"><img border="0" id="img3" src="images/button2C.gif"
height="20" width="100" alt="Home" fp-style="fp-btn: Soft Capsule 10;
fp-font-style: Bold; fp-font-size: 8; fp-transparent: 1" fp-title="Home"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button2D.gif')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2C.gif')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button2E.gif')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2D.gif')"></a>

From this, remove the
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2D.gif')"
bit
This leaves the button in the pressed state when a link is clicked. Good so
far. But when another link is pressed, the button does not revert to the
normal state.

Now you need to add an image swap behaviour that restores the original
unpressed state to every other button when it is clicked. This has to be
done for every button in the navigation bar. That, in my opinion, is a lot
of effort for such a limited return.
The same applies to using other image swaps (since that is all IBs use).

You can make very attractive buttons using CSS and text links. Start at
http://www.htmlcenter.com/tutorials/tutorials.cfm/154/CSS/
for an example.
 
Opps - Another Question... How do I do the following:

Now you need to add an image swap behaviour that restores the original
unpressed state to every other button when it is clicked. This has to be
done for every button in the navigation bar.

Any Ideas?

Thanks,

Dre
 
Using Format Behaviors (and select swap image from the drop down)
- but as Ron points out that is a painful process

And in your case it will never work since you are using Frames and the frameset page w/ the buttons in it is probably never changing
(just changing a target page unless you are also using a script to swap both frameset pages)
--




| Opps - Another Question... How do I do the following:
|
| Now you need to add an image swap behaviour that restores the original
| unpressed state to every other button when it is clicked. This has to be
| done for every button in the navigation bar.
|
| Any Ideas?
|
| Thanks,
|
| Dre
|
|
| "Big Dre" wrote:
|
| > THANK YOU! I will try it.
| >
| > Dre
| >
| > "Ronx" wrote:
| >
| > > This is easiest when using text links.
| > > Set a style for the links, including the Active state of the links. When
| > > clicked the page will load in the main frame as usual, but the link in the
| > > links frame will take on the colour for an Active link.
| > >
| > > Place this between <head> and </head> in the links page, in code or html
| > > view:
| > >
| > > <style type="text/css">
| > > a:link {color: blue; text-decoration: none;}
| > > a:visited {color: purple; text-decoration: none;}
| > > a: active {color: red; text-decoration: underline;}
| > > a:hover {color: green; text-decoration: underline;}
| > > </style>
| > >
| > > When using Interactive buttons you can still indicate tyhe active page, but
| > > it's a lot more complex.
| > > The usual IB is depicted in code view as
| > >
| > > <a href="index.html"><img border="0" id="img3" src="images/button2C.gif"
| > > height="20" width="100" alt="Home" fp-style="fp-btn: Soft Capsule 10;
| > > fp-font-style: Bold; fp-font-size: 8; fp-transparent: 1" fp-title="Home"
| > > onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button2D.gif')"
| > > onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2C.gif')"
| > > onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button2E.gif')"
| > > onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2D.gif')"></a>
| > >
| > > From this, remove the
| > > onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button2D.gif')"
| > > bit
| > > This leaves the button in the pressed state when a link is clicked. Good so
| > > far. But when another link is pressed, the button does not revert to the
| > > normal state.
| > >
| > > Now you need to add an image swap behaviour that restores the original
| > > unpressed state to every other button when it is clicked. This has to be
| > > done for every button in the navigation bar. That, in my opinion, is a lot
| > > of effort for such a limited return.
| > > The same applies to using other image swaps (since that is all IBs use).
| > >
| > > You can make very attractive buttons using CSS and text links. Start at
| > > http://www.htmlcenter.com/tutorials/tutorials.cfm/154/CSS/
| > > for an example.
| > > --
| > > Ron Symonds
| > > Microsoft MVP (FrontPage)
| > > Reply only to group - emails will be deleted unread.
| > >
| > > | > > > Hi,
| > > > I want to know how I can change a button so that it displays a different
| > > > color when pressed on a frames page. I would be nice to tell what page
| > > was
| > > > being displayed. Any ideas?
| > > > Thanks for your help!
| > > > Dre
| > >
| > >
| > >
 
Back
Top