Sami's Site: CSB - Trellix Support and Tests
 previous    next   
CSB4 Rollover Links   ·   Link Styles 1   ·   Link Styles 2   ·   Arrowhead   ·   Websafe Fonts and tests   ·   LINK HOVER TOOLTIP   ·   OverLIB tooltip

Link Styles 2
Change groups of links on a page
Column 1:

This code allows a group of links to have a special effect

ON MOUSEOVER:
Overline and Underline
Font changes to UPPERCASE
Changes the font color
Column 2:

This is a modified version of the  first code.  

ON MOUSEOVER:
Font changes to UPPERCASE
Changes the font color
Adds a background color
Column 3:

Place this code at the top of the page to remove underlines from all the links on the page.  
Note: If publishing with frames use it in all the frames or only one.
ON MOUSEOVER:
Changes the font color
See sample on the index page
Roll your mouse over these:

Roll your mouse over these:
Column 3 code:
THIS VERSION UPDATED!!!
NOW WORKS IN FIREFOX!
<STYLE>
<!--
A:link, A:visited, A:active
{ text-decoration: none }
A:hover
{ color: #CC0066; text-decoration: none }
U {text-decoration: none}
-->
</STYLE>

5 additional samples
Style codes for the navigational links at the top of these sample
pages make them not match the rest of the links on the page
Putting links in a table?  Want a background image too?
Samples, VERY easy instructions, and script provided.
What color do you want your links to be?   


GENERAL INSTRUCTION:
If you have more than one set of codes on a page like this one does, then rename the next version so they do not interfere with each other. Notice that in the scripts, the links are named menucont  and menucont2.
Each group of links must have a Style setting section of code, then each link is added.   Change the Style codes at the beginning of the code to adjust the color of the font, size, bold, underline, overline, uppercase, etc. The two link lists above show some of the adjustments you can do...just play with the codes until you find the right combination.
List your links together
You can choose to open a link several ways:
in a new window with target="_blank"       [Try the Renew Coat links]
in the same window with target="_top"     [Try the Clear Colorseal link - but remember to click BACK]
in a particular frame target="TRLX_Middle"
(if publishing with frames - this page is not published with frames)
in a particular window with target="FRAME1"  (See iFrame examples)
Input a statement about the link into the title=""
These codes are placed into your webpage using Insert > HTML (or webgem in Trellix)

Column 1 code:
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

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Martial Boissonneault -->
<!-- Web Site:  http://getElementById.com -->
<!--     Modification:  Samantha Conway -->
<!--     Allow link to pop open a new resizable window on top of current window -->

<style type="text/css">
.menulinks {position:relative;}
#menucont a{color:#660099; font-weight:bold; text-decoration:none;}
#menucont a:hover{color:#CC0066 ; font-weight:bold; text-decoration:underline overline; text-transform: uppercase;}
</style>

<BODY>

<div id="menucont">
  <!--  Put all links between <center> </center> to get those links align center for older browser -->
  <a href="http://www.lambertusa.com/resurface/id22.htm"   TARGET="_blank"    TITLE="Thin patch material for a 'Like New' surface"  id="a1" class="menulinks" title="Renew Coat">Renew Coat</a><br>
  <a href="http://www.lambertusa.com/cure/id45.htm"  TARGET="_top"    TITLE="Clear sealer designed for use over colored concrete"  id="a2" class="menulinks" title="Clear Colorseal">Clear Colorseal</a><br>
  <a href="http://www.lambertusa.com/resurface/id103.htm"  TARGET="_top"    TITLE="Anchor cement"  id="a3" class="menulinks" title="White Plug">White Plug</a><br>

</div>

Column 2 code:
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
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Martial Boissonneault -->
<!-- Web Site:  http://getElementById.com -->
<!-- Modified by Samantha Conway - second type on same page -->

<style type="text/css">
.menulinks {position:relative;}
#menucont2 a{color:#993300; font-weight:bold; text-decoration:none;}
#menucont2 a:hover{color:#CC3300 ; font-weight:bold; text-decoration:none; text-transform: uppercase; background-color:yellow;}
</style>
</HEAD>

<BODY>

<div id="menucont2">
  <!--  Put all links between <center> </center> to get those links align center for older browser -->

  <a href="http://www.lambertusa.com/resurface/id22.htm"   TARGET="_blank"    TITLE="Thin patch material for a 'Like New' surface"  id="a1" class="menulinks" title="Renew Coat">Renew Coat</a><br>
  <a href="http://www.lambertusa.com/cure/id45.htm"  TARGET="_top"    TITLE="Clear sealer designed for use over colored concrete"  id="a2" class="menulinks" title="Clear Colorseal">Clear Colorseal</a><br>
  <a href="http://www.lambertusa.com/resurface/id103.htm"  TARGET="_top"    TITLE="Anchor cement"  id="a3" class="menulinks" title="White Plug">White Plug</a><br>

</div>