Links

The Text Link has to be defined explicitly via the anchor tag, but it has no CSS class. The Function / Table Link, the Button / Tabstrip Link and the Application Header Link are part of the particular HTML Business Function and don't need to be set explicitly.

 

1. Text Link


The Text Link discriminates between unvisited, active and visited links.
It is underlined on mouseover. CSS-class: none

 

a) Link to internal URL:

This is an Internal Text Link "unvisited"

This is an Internal Text Link "active"

This is an Internal Text Link "visited"

 

2. Function and Table Link


The Function and Table Link only highlights an active link (i.e. when it is clicked)
Visited and the unvisited links have the same color.
It is underlined on mouseover. CSS-class: "funclink"

  This is a Function Link  

 

3. Button and Tabstrip Link


The Button and Tabstrip Link is black and highlights blue on mouseover.
Visited and the unvisited links have the same color.
It has no underline. CSS-class: "linkhover"

   Button   
      
Main Information
Portfolio Tabs
Mailbox
Communication

 

4. Emphasized Button Link


This link has a white text color and a blue highlight on mouseover.
Visited and the unvisited links have the same color.
It has no underline. CSS-class: "linkhoverblue"

   Action   

 

5. Aplication Header Link


Application header bar links (offstate) have a class (class="appheadlink") and are light blue (#97A1c9). Current (onstate) links are defined by a class (class="appheadlinkon") and are white (#FFFFFF).

All headerbar links have underline text decoration on mouseovers. In addition, the light blue offstate links have a piece of javascript that changes the hover color of the link to white, using the already defined classes in the stylesheet. The hover underline and color change work only in IE.

  Apphead Link   Apphead Link On  

Javascript for white rollover links:

 

 
Body Tag

The body tag for each page should look like this:

 

Source:  SAP Business HTML Cookbook