Sami's Site: CSB - Trellix Support and Tests
previous    next
Test Index   ·   CSB4 Rollover Links   ·   Link Styles 1   ·   Link Styles 2   ·   Link Styles 3   ·   iFrame Tutorial - IFrames described in detail!   ·   Form sample in iFrame   ·   Arrowhead   ·   Excel   ·   Color Blind   ·   Websafe Fonts and tests   ·   Make an Alert Box   ·   Webgem Placeholder Images   ·   LINK HOVER TOOLTIP   ·   OverLIB tooltip   ·   Disguise Email   ·   Quote of the Month   ·   Map to your location!   ·   Link Border Test   ·    FORUM

Link Styles 1
Change individual links on the page


These links must be inserted via Insert >HTML (Build Your Own Webgem in Trellix)
(For reference, this dark blue is the standard link color for this page)

What color do you want your links to be?   

Bonus:  GLOWING  links on mouseover!    Perfect for dark backgrounds, Halloween, Special Effects!


 
#1  Plain simple links - no mouseover
these stay the same color, even after visited!
column 1
multi color
column 2
 and no underline

Column 1 code:  red change to your link   blue change the color
<a href="http://www.samisite.com/" style="font-weight:bold; color: #FFFFFF;  ">HOME PAGE</a>  

Column 2 code:  red change to your link , blue change the color,  remove underline
<a href="http://www.samisite.com/" style="font-weight:bold; color: #FFFFFF; text-decoration: None;  ">HOME PAGE</a>  

How to change the font fast and easy: Put your inserted code into the webgem as normal.  Then highlight the webgem to select the space before and after the inserted code.
Choose the font type and size from your toolbar-let the program do the rest!  
I changed the first column in the table above to have: Arial in white, Verdana italic in red and Times New Roman in blue and did not have to change the code to do it!



 
# 2 OTHER inline style changes to individual links:
(highlighted color is approx color indicated in code for easier reference)
Make sure the mouseout code returns the link to it's original state.
In most of my links below I return to this default dark blue (330066).
<a href="http://www.samisite.com/" onmouseover="this.style.color='#FF0000'"  onmouseout="this.style.color='#330066'">Font Color Red on Mouseover</a>

<a href="http://www.samisite.com/" style="font-weight:bold; color: #FFFFFF; " onmouseover="this.style.color='#FF0000'"  onmouseout="this.style.color='#FFFFFF'">Font Color White change to Red on Mouseover</a>
NOTE: by adding   style="font-weight:bold; color: #FFFFFF;  "   to the link samples in this second table, your links can be different colors and bolded.  Without that piece of code, the original font color for your links will be the same as your default set for the whole page.  Default for this page is dark blue.  With the table background color changed to dark blue, the links would not show! Since only this sample has the extra code added to make the link white, the other samples in the 2nd table start with blue, change on mouseover, then return to blue after mouseout.

<a href="http://www.samisite.com/" style="text-decoration: none;" onmouseover="this.style.color='#FF0000'"  onmouseout="this.style.color='#330066'">Font Color Red on Mouseover no underline</a>
<a href="http://www.samisite.com/" onmouseover="this.style.background='#FFFF80'" onmouseout="this.style.background='#BBBBBB'">Background Color Yellow on Mouseover</a>
<a href="http://www.samisite.com/" onmouseover="this.style.background='#ff6600'; this.style.color='#0033CC
'" onmouseout="this.style.background='#BBBBBB'; this.style.color='#330066'">Background Color Orange and Font Blue on Mouseover</a>
<a href="http://www.samisite.com/" onmouseover="this.style.fontStyle='italic'" onmouseout="this.style.fontStyle='normal'">Font Style Italic on Mouseover</a>
<a href="http://www.samisite.com/" onmouseover="this.style.fontStyle='italic'; this.style.color='#0033CC'" onmouseout="this.style.fontStyle='normal'; this.style.color='#330066'">Font Style Italic and color Blue on Mouseover</a>
<a href="http://www.samisite.com/" style="text-decoration: none;" onmouseover="this.style.fontStyle='italic'; this.style.color='#0033CC'" onmouseout="this.style.fontStyle='normal'; this.style.color='#330066'">Font Style Italic and color Blue on Mouseover no underline</a>   
<a href="http://www.samisite.com/" style="text-decoration: underline overline;" onmouseover="this.style.fontStyle='italic'; this.style.color='#0033CC'" onmouseout="this.style.fontStyle='normal'; this.style.color='#330066'">Font Style Italic and color Blue on Mouseover no underline</a>   

 
# 3 Glowing style changes to links:
To capture the code, press Select All then COPY the contents.
I have made notes in code below it and it will effect functionality!
Select All


filter glow on mouseover
#glowg - put these two lines in the style code for green
#glowgu - put these two lines in the style code for green, and no underline
filter glow on mouseover
#glowo - put these two lines in the style code for orange
#glowou - put these two lines in the style code for orange, and no underline   
Color change to green
#glowc - put these two lines in the style code no underline to underline

Notes about this code:
Choose the type of glow you want (glowg, glowu, glowo, glowu, glowc) and put those two lines into the style.  If you will not be using the others, you can safely delete those lines of the code.
Adjust the size of the link.  In this sample, some links are longer so must be set a little wider (425)
Change RED to your link information
Don't want the link underlined?  to the style code add:   text-decoration:none;    
These links have the dotted outline removed when you click the link:  onfocus="this.blur()"
You can change the TARGET destination to something different:
TARGET="_top" is the same window      TARGET="_blank" is a new window
Each of these links must have it's own id number.   If you have only one link, then use id="a1" .  I have 4 links in this sample, so a1 through a5 were used.   (a6 is used in the link in the black box above!)
Yes, you can have other colors for glowing text.  Just change the text hex color codes!


<!-- Original code:  Samantha Conway -->
<!-- Please keep credit in the code when you use it! -->
<style type="text/css">
.glowlinks {position:relative;}
#glowg a{width: 400px; height: 30px; color: #006400; }
#glowg a:hover{width: 400px; height: 30px; color: #40FF40; filter: glow(color=#00C000, strength=3); }

#glowgu a{width: 425px; height: 30px; color: #006400; text-decoration:none; }
#glowgu a:hover{width: 425px; height: 30px; color: #40FF40; filter: glow(color=#00C000, strength=3); text-decoration:none;}

#glowo a{width: 425px; height: 30px; color: #FF6600; }
#glowo a:hover{width: 425px; height: 30px; color: #FFFFCC; filter: glow(color=#FF3300, strength=3); }

#glowou a{width: 400px; height: 30px; color: #FF6600; text-decoration:none;}
#glowou a:hover{width: 400px; height: 30px; color: #FFFFCC; filter: glow(color=#FF3300, strength=3); text-decoration:none;}
</style>

<div id="glowg">
<a href="http://www.samisite.com/"   TARGET="_blank"   TITLE="Home page" onfocus="this.blur()" id="a1" class="glowlinks">Filter Glow on Mouseover - open link in new window</a><br>
</div>

<div id="glowgu">
<a href="http://www.samisite.com/"   TARGET="_top"   TITLE="Home page"  onfocus="this.blur()" id="a2" class="glowlinks">Filter Glow on Mouseover - open link in SAME window</a><br>
</div>

<div id="glowo">
<a href="http://www.samisite.com/"   TARGET="_top"   TITLE="Home page" onfocus="this.blur()" id="a3" class="glowlinks">Filter Glow on Mouseover - open link in same window</a><br>
</div>

<div id="glowou">
<a href="http://www.samisite.com/"   TARGET="_blank"   TITLE="Home page" onfocus="this.blur()" id="a4" class="glowlinks">Filter Glow on Mouseover - open link in new window</a><br>
</div>

<div id="glowc">
<a href="http://www.samisite.com/"  TARGET="_blank"    TITLE="Home page" onfocus="this.blur()"  id="a5" class="glowlinks">Two color - no underline orange to underline green</a><br>
</div>