Examples of OpenLinkz have so far been shown on light colored backgrounds. Suppose you have a dark color scheme on your pages? No problem.
The OpenLinkz widget can be configured to provide different styles for the appearance of links. There are three options:
(1) You can adjust the border underneath the link. It can be solid or dashed.
(2) You can adjust the color of the border under the link.
(3) You can adjust the color of the link when you hover over it.
Some examples are shown below against a dark blue background.
Note that the first parameter was left blank; ie, two single quotes with nothing in between. This means accept the default value which is 'dashed'.
Here is a cheat sheet:
|1||Bottom Border||'', 'dashed', 'solid', 'none'|
|2||Border Color||'', color names such as 'red', 'blue', etc. and numeric colors such as '#e6e6e6 or '#000000'|
|3||Background Color||same as Parameter #2|
OK, so you took a look at OpenLinkz and decided there is just too much typing involved. Should you use the ANCHOR tag or the SPAN tag? What's with all this stuff in the "onmousever" event? And for that matter, why fool around with "onmouseover" at all?
You'll be glad to know that we've taken OpenLinkz to a new level of simplicity. Here are the improvements.
First, you don't have to add the script at the end of your page to initialize OpenLinkz.
Second, if you don't want to use ANCHOR tags, you don't have to. Since SPAN and ANCHOR tags work pretty much the same, OpenLinkz lets you use either one. But if you want to be simple, just use the SPAN tag. OpenLinkz will underline it with a dashed line so readers will know it is clickable.
Third, if you don't want to designate search terms, you don't have to. This means you can leave out the "onmouseover" function call to openLinkz(this, ...). As long as there is a reasonable search term within the opening and closing parts of the tag, OpenLinkz will figure it out. Here is an example:
Here is how it looks in a sentence: AJAX is driving the development of Web 2.0
It can't get much simpler than that.
Let's look at a couple of other examples. Here is a sentence that uses links to general news and to stock market tools.
Here is how this looks: Options backdating is even affecting Apple (AAPL).
Use this cheat sheet to make sure you are following the basic rules for setting up the OpenLinkz widget and getting it to work on your pages. Once you have the initialization stuff done (see the prior post on Enabling OpenLinkz for more details), there are just a few things to keep in mind: use the right tags, set up the onmouseover event properly and spell the class name correctly.
Load the Code
- Use either an ANCHOR tag or a SPAN tag
- Set up the "onmouseover" event:
- onmouseover="openLinkz(this, 'first search term', 'second search term');"
- Be careful with the quotes.
Or leave it out altogether and let OpenLinkz supply a default (see the OpenLinkz Simplified post).
- Supply the tag with the appropriate CLASS name (class="xxxxLink") as shown in the table below.
- Remember, class names are case sensitive.
|OpenLinkz Theme||tag Class|
|news and current events||newsLink|
Here are the input parameters to the initializeOpenLinkz() function that you can use to modify the appearance of links (see the Changing the Appearance of Links post).
- Parameter #1: Bottom Border, possible values: '', 'dashed', 'solid', 'none'
- Parameter #2: Border Color, possible values: '', color names such as 'red', 'blue', etc. and numeric colors such as '#e6e6e6 or '#000000'
- Parameter #3, Background Color, possible values: same as Parameter #2
Enabling OpenLinkz in your pages
It is very easy to install the OpenLinkz widget in your web page or blog. The script file needs to be loaded. When the page loads, the functionality will be automatically initialized. The following code snippets show you how to do it.
If you are using Blogger or one of the other XML-based blogging applications, you may find that the code snippet above causes an error. In that case, try pasting into the HEAD section of your XML template the following code snippet:
Please read the post OpenLinkz Simplified to see all the tips on how you can streamline your HTML by leaving out any reference to the OpenLinkz functionality.
(1) The word 'this' (with no quotes) must always be the first parameter.
(2) The primary search word must always be the second parameter. In the case of a stockLink, this must be the symbol for the stock.
(3) The third parameter is optional. It can be any search term that enhances the search experience. In the stockLink example, you could pass the company name in this parameter to enhance the search capability. This where you can really fine tune the search.
Note that the tag must have the correct class in order to work properly. At this time it can be either "stockLink", "newsLink" or "techLink". Be careful: it is case sensitive and must be spelled exactly as shown. This is the one thing that must always be included in your tag in order for the OpenLinkz widget to work.
An example of using StockLinkz (OpenLinkz for the stock market) with an anchor tag and the stock symbol:
Here's how the example above looks: Microsoft (MSFT)
There may be situations where you are using a classname for your anchor tags already in order to give links a particular look or style. No problem. In this case, you can implement OpenLinkz using a span tag and your links will remain just as you like them. An example of using TechLinkz with a span tag and two search terms:
Here's how the example above looks in a sentence: AJAX is driving the growth of Web 2.0
Be sure to review the other posts on setting up the OpenLinkz widget, especially OpenLinkz Simplified and OpenLinkz Cheat Sheet.
OpenLinkz is a new widget I have been working on that I'm ready to share.
OpenLinkz is a pop-up menu widget that automatically provides links to commonly used information sources organized by a particular theme. As examples, themes can relate to the stock market, technology, general news, social sites, maps and geography, etc.
OpenLinkz takes a search term that you provide (usually the key word you are highlighting in your text) and constructs the links to each site listed in the theme so the user can immediately retrieve information related to that key word.
So far, there are three ways to use OpenLinkz and I have a nickname for each:
- stockLinkz - OpenLinkz for stock market bloggers
- techLinkz - OpenLinkz for technology bloggers
- newsLinkz - OpenLinkz for those who write about news and current events
Here are some examples (move your mouse and hover over the underlined word):
- Microsoft (MSFT) recently reported strong earnings.
- AJAX is driving the growth of Web 2.0
- Senate leader Harry Reid says the war in Iraq is lost.