lilRuBbErDuCkS
05-03-2003, 08:31 PM
Hi.
I am having a H-U-G-E brain freeze right now. How do you make an email link change style/color when you hover over it? I want it to overline AND underline AND change color instead of just having it be underlined. Also, all my links are that puky purple color when you click on them and they still don't change even after I add the <alink= vlink= ...etc. etc..> code. Whats up with that?? THANKS!
Spirit892
05-03-2003, 08:38 PM
Thats called CSS. It doesn't just change your email links, it changes all your links. A basic style sheet looks like this:
<style type="text/css">
<!--
A:link
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:visited
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:active
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000 }
A:hover
{ text-decoration: value [underline, overline, underline overline, line-through, blink, none]; color:#000000;
background-image:url(yourimage.gif);
background-color:#000000;
cursor:value [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize }
body
{ background-color: #000000;
background-image:url(value); [url of background image to be used, i.e. background.gif]
background-repeat:value; [repeat, no-repeat, repeat-x, repeat-y]
background-position:valueI valueII; [valueI: top, center, bottom, percentage, pixel number]
[valueII: right, center, left, percentage, pixel number]
background-attachment: [scroll, fixed]
font-family: tahoma,arial,verdana;
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight:value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size:value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]
direction:rtl; [this reverses the entire site so the scrollbar is on the left]
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000 }
td
{ font-family: value; [arial, tahoma, verdana, common fonts]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value [2cm, 4cm : two values for four sides, add numerical value] }
input, textarea
{ background: #000000 url(yourimage.gif);
font-family: tahoma,arial,verdana;
color: #000000;
border-style: value [dotted, dashed, solid, double, groove, ridge, inset, outset];
border-color: #000000;
border-width: valuepx [numerical value, 5, 6, 8...] }
-->
</style>
See here (http://www.lissaexplains.com/css.shtml) for me info.
You add the style sheet between the <HEAD> and </HEAD> tags.
darksoul
05-03-2003, 08:40 PM
okay. heres one way to do it (put this code between the <head> and </head> tags):
<style type="text/css">
<!--
a:hover { color: color; text-decoration: underline, overline; }
a:link { color: color; text-decoration: underline, overline; }
a:visited { color: color; text-decoration: underline, overline; }
a:visited:hover { color: color; text-decoration: underline, overline; }
-->
</style>
i'm not sure is that'll do overline, seeing as i never use it.
you might not want to use what spirt said, it changes more then just the links.
Please use the edit button instead of replying within 5 minutes of the first post :)
-Moderator
this would be my guess at your solution...
this coding goes within the HEAD area of your page coding...
<style type="text/css">
a {text-decoration:none; color:#ff0000;}
a:hover {text-decoration:overline underline;}
a.email {text-decoration:none; color:#0000ff;}
a.email:hover {text-decoration:overline underline;}
</style>
change the colors to your desire.
the first two lines affect all of the links.
the last two lines affect anything that you call a class to such as...
<a href="mailto:you@there.com" class="email"> text or image here </a>