The tool ribbon
We call the banner you see at the top on every Eionet website the tool ribbon. It contains generic tools for the page. The links to the left go to other of EEA's networks. The links to the right are diverse operations, such as login, search, print, toggle fullscreen. The developer of the website has some freedom to choose the operations that are meaningful for that site. There are no <img> tags here. All the icons you see are CSS backgrounds. If you want to provide your own the dimensions must be 16x16 pixel. A tool is an <a> with <span> around the text. If you want to show an icon with the text, you just set left padding to 18px, and a non-repeating background image. If you want to show only an icon, then it is a little trickier. We use the Fahrner Image Replacement (FIR), and the <span> is used to remove the display of the text. The <a> must have a title attribute. It will be shown as a tooltip if the user hovers over the link, and when FIR is used, this is what a blind user will hear.
Example
<a id="printlink" title="Print this page"
href="javascript:this.print();"><span>Print</span></a>
Predefined tools
- eealink
- Shows the EEA logo
- loginlink
- Shows an icon with an arrow pointing into an opening.
- logoutlink
- Shows an icon with an arrow pointing out of an opening.
- printlink
- Shows an icon of a printer. The link must point to the javascript method this.print()
- rsslink
- Shows an icon of RSS syndication
- skiplink
- Does not show anything on a screen-based webbrowser, but is used by handheld devices to skip the navigation and go directly to the content of the page. Must be the first link of the leftside tools.
- fullscreenlink
- Shows an icon of the fullscreen toggle. The actual icon depends on whether the page is in full screen mode or not.
- pagehelplink
- Shows an icon of a question mark
