How to underlined text on Button / Tabs

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

Guest

How do I underline text on a button or tab?
Ideally I would like the tab to have a selected/hovered/deselected
states/graphics

Reason - underlining is natual for a hyperlink ... and tabs are hyperlinks.
 
Barry said:
How do I underline text on a button or tab?
Ideally I would like the tab to have a selected/hovered/deselected
states/graphics

Reason - underlining is natual for a hyperlink ... and tabs are
hyperlinks. --
Thanks ... Barry
Click to expand...

Try this
<input type="button" value="whatever" style="text-decoration:underline" />

But for selected/hovered/deselected states/graphics, you would need
something a bit more complex.

These are the CSS styles for doing that with anchor tags

a { text-decoration: underline;}
a:link { color: blue; }
a:visited { color: fuchsia; }
a:hover { color: #90f; }

All <a> tags will be underlined
When linked, it will be blue text
When visited, it will be fuchsia text
When hovered, it will be text with colour #90f (a violet colour)

You can of course put any style you want into
a:link, a:visited, a:hover

But these aren't valid for <input> tags.

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------
 
Not sure that this answers my question. By the time the text is on a button
... it is no longer 'text' it is all part of the button 'graphic'.
eg - if I use FPs 'interactive button' facility - it gives me all the 3
states, but doesnt have the facility to underline the text. Nor does
'navigation bar'.

Can anyone point me to an example of underlined text on a button / tab?
--
Thanks ... Barry


Trevor L. said:
Barry said:
How do I underline text on a button or tab?
Ideally I would like the tab to have a selected/hovered/deselected
states/graphics

Reason - underlining is natual for a hyperlink ... and tabs are
hyperlinks. --
Thanks ... Barry
Click to expand...

Try this
<input type="button" value="whatever" style="text-decoration:underline" />

But for selected/hovered/deselected states/graphics, you would need
something a bit more complex.

These are the CSS styles for doing that with anchor tags

a { text-decoration: underline;}
a:link { color: blue; }
a:visited { color: fuchsia; }
a:hover { color: #90f; }

All <a> tags will be underlined
When linked, it will be blue text
When visited, it will be fuchsia text
When hovered, it will be text with colour #90f (a violet colour)

You can of course put any style you want into
a:link, a:visited, a:hover

But these aren't valid for <input> tags.

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
If using FP2003, look into using Interactive Buttons.
--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage

http://www.Ecom-Data.com
==============================================


Barry said:
Not sure that this answers my question. By the time the text is on a button
.. it is no longer 'text' it is all part of the button 'graphic'.
eg - if I use FPs 'interactive button' facility - it gives me all the 3
states, but doesnt have the facility to underline the text. Nor does
'navigation bar'.

Can anyone point me to an example of underlined text on a button / tab?
--
Thanks ... Barry


Trevor L. said:
Barry said:
How do I underline text on a button or tab?
Ideally I would like the tab to have a selected/hovered/deselected
states/graphics

Reason - underlining is natual for a hyperlink ... and tabs are
hyperlinks. --
Thanks ... Barry
Click to expand...

Try this
<input type="button" value="whatever" style="text-decoration:underline" />

But for selected/hovered/deselected states/graphics, you would need
something a bit more complex.

These are the CSS styles for doing that with anchor tags

a { text-decoration: underline;}
a:link { color: blue; }
a:visited { color: fuchsia; }
a:hover { color: #90f; }

All <a> tags will be underlined
When linked, it will be blue text
When visited, it will be fuchsia text
When hovered, it will be text with colour #90f (a violet colour)

You can of course put any style you want into
a:link, a:visited, a:hover

But these aren't valid for <input> tags.

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
Click to expand...
 
Barry said:
Not sure that this answers my question. By the time the text is on a
button .. it is no longer 'text' it is all part of the button
'graphic'.
eg - if I use FPs 'interactive button' facility - it gives me all the
3 states, but doesnt have the facility to underline the text. Nor
does 'navigation bar'.

Can anyone point me to an example of underlined text on a button /
tab? --
Thanks ... Barry
Click to expand...

What I posted certainly works (I tested it before posting):
<input type="button" value="whatever"
style="text-decoration:underline" />

Even though the text is imbedded in the button, it is still underlined.

To change the style on mouseover (e.g. on hover) and on mouseout (e.g. when
visited),
try the code below (also tested)

I changed the <input> tag to <button>. Either works.

I chose blue, red and black for contrast. You can use any other colours.

<html>
<head>
<title>Button Demo</title>
<script type="text/javascript">
function changecol(color)
{document.getElementById("button1").style.color=color}
</script>
</head>
<body>

<button id="button1"
style="text-decoration:underline;color:blue"
onmouseover="changecol('red')"
onmouseout="changecol('black')">whatever</button>
</body>
</html>

I haven't used interactive buttons as such. I have found using buttons as
above works for me
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------
 
It is not possible to underline the text in a FP IB
- underline is not a valid parameter available to the IB

The only valid parameters are those in
http://support.microsoft.com/default.aspx?scid=kb;en-us;555010

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
_____________________________________________


| Barry wrote:
| > Not sure that this answers my question. By the time the text is on a
| > button .. it is no longer 'text' it is all part of the button
| > 'graphic'.
| > eg - if I use FPs 'interactive button' facility - it gives me all the
| > 3 states, but doesnt have the facility to underline the text. Nor
| > does 'navigation bar'.
| >
| > Can anyone point me to an example of underlined text on a button /
| > tab? --
| > Thanks ... Barry
|
| What I posted certainly works (I tested it before posting):
| <input type="button" value="whatever"
| style="text-decoration:underline" />
|
| Even though the text is imbedded in the button, it is still underlined.
|
| To change the style on mouseover (e.g. on hover) and on mouseout (e.g. when
| visited),
| try the code below (also tested)
|
| I changed the <input> tag to <button>. Either works.
|
| I chose blue, red and black for contrast. You can use any other colours.
|
| <html>
| <head>
| <title>Button Demo</title>
| <script type="text/javascript">
| function changecol(color)
| {document.getElementById("button1").style.color=color}
| </script>
| </head>
| <body>
|
| <button id="button1"
| style="text-decoration:underline;color:blue"
| onmouseover="changecol('red')"
| onmouseout="changecol('black')">whatever</button>
| </body>
| </html>
|
| I haven't used interactive buttons as such. I have found using buttons as
| above works for me
| --
| Cheers,
| Trevor L.
| [ Microsoft MVP - FrontPage ]
| MVPS Website: http://trevorl.mvps.org/
| ----------------------------------------
|
 
Thanks Trevor,
I have copied in your script and can see it working,
but your scripting ability is (much) better than mine...
I can see the text changing colour, and the change of button graphic on
select,
.... but I can't see in your script where the button graphics are defined I
need (I think) to design my own as they need to be tabs rather than buttons.
Sorry to be so dense.
--
Thanks ... Barry


Trevor L. said:
Barry said:
Not sure that this answers my question. By the time the text is on a
button .. it is no longer 'text' it is all part of the button
'graphic'.
eg - if I use FPs 'interactive button' facility - it gives me all the
3 states, but doesnt have the facility to underline the text. Nor
does 'navigation bar'.

Can anyone point me to an example of underlined text on a button /
tab? --
Thanks ... Barry
Click to expand...

What I posted certainly works (I tested it before posting):
<input type="button" value="whatever"
style="text-decoration:underline" />

Even though the text is imbedded in the button, it is still underlined.

To change the style on mouseover (e.g. on hover) and on mouseout (e.g. when
visited),
try the code below (also tested)

I changed the <input> tag to <button>. Either works.

I chose blue, red and black for contrast. You can use any other colours.

<html>
<head>
<title>Button Demo</title>
<script type="text/javascript">
function changecol(color)
{document.getElementById("button1").style.color=color}
</script>
</head>
<body>

<button id="button1"
style="text-decoration:underline;color:blue"
onmouseover="changecol('red')"
onmouseout="changecol('black')">whatever</button>
</body>
</html>

I haven't used interactive buttons as such. I have found using buttons as
above works for me
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
Barry said:
Thanks Trevor,
I have copied in your script and can see it working,
but your scripting ability is (much) better than mine...
I can see the text changing colour, and the change of button graphic
on select,
... but I can't see in your script where the button graphics are
defined I need (I think) to design my own as they need to be tabs
rather than buttons. Sorry to be so dense.
Click to expand...

Ah, I see

In that case you would have to design your own graphics in 3 versions
1. Normal, i.e. as first seen on page (say image1.gif)
2. The mouseover, or hover, version (say image2.gif)
3. The mouseout, or visited, version (say image3.gif)

Then you would need to alter the <button> tag to something else

Try this
<div id ="tab1" style="position: relative; width: 60px; height: 25px;"
onmouseover="setImage('tab1','<img src=\'images\\image2.gif\'>');"
onmouseout="setImage('tab1','<img src=\'images\\image3.gif\'>');">
<img src='images\image1.gif'>
</div>

Note that the images must be of the same size, in this example 60 by 25.
If they are a different size, alter the width and height parameters in the
style="..." spec

And take care with the backslashses, that is this character: \
Use of these is important:
\' this escapes the ' character so that it is read corretly within a set
of quotes (' and ' )
\\ this escapes the \ character itself
and in one case
\ this is the normal way of indicating a folder

No doubt you want to do something when the graphic is clicked, so just add
onlick="fnname()"

where fnname is a JS function which is known, e.g. it has been defined
between
<script type="text/javascript">
and
</script>
or it can be valid JS (e.g. to test this I used onclick="alert('clicked')" )

I note that you say you want to use tabs (plural) so using a <div> tag may
not be the best option. The next <div> will appear below the previous one

So you can use a table
<table>
<tr>
<td id="tab1" onmouseover="setImage('test','<img
src=\'images\\image2.gif\'>');"
onmouseout="setImage('test','<img src=\'images\\image3.gif\'>');">
<img src='images\image1.gif'>
</td>
etc.

I haven't tested this

If I have confused you, post your code and I will look at it
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------
 
Back
Top