Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Add More Bang to Your Content With Keyword Popup Menus

By Stephen Bucaro

In today's competitive environment you need all the bang you can get from the content of your Web site. You can expand the text on your webpage by making specific keywords into text links. If the user clicks on a text link, it will take them to another page on your Website, or an advertisement on your website, or perform a search related to that keyword. What if, when the user moved their mouse pointer over a keyword, a popup menu appeared providing links for all three of those options?

In this article, I'll provide you with easy code to do just that. We'll use html span elements to highlight keywords and create a specific popup menu for each keyword. We'll apply some simple CSS (Cascading Style Sheets) rules to control the appearance of the popup menus. We'll use three very simple Java Script functions to control the whole thing. You'll be surprised how easy it is to use this technique add more bang to your webpage content.

Below is an example of some informative content you might find on a typical website.

There are basically two different types of printers in
use by the home consumer today. The inkjet printer or
bubble jet printer squirts tiny droplets of ink on the
surface of the paper to form an image. The laser type
of printer uses toner powder with a photo electrostatic
process to form an image on paper. Replacement ink
cartridges cost much less than replacement toner
cartridges, but the cost per printed page is much
higher for inkjet printing than laser printing.

We can get more bang from this content by linking the keywords "inkjet printer","bubble jet printer", "ink cartridges", and "toner cartridges" to webpages that give more information, sell printers and cartridges, and generate (possibly paid) searches for these items. The four html span elements shown below create popup menus related to these four keywords.

<span id="menu1" class="popMenu">
<a href="#" class="menuLink">Definition</a>
<a href="#" class="menuLink">Buy inkjet printer</a>
<a href="#" class="menuLink">Search inkjet printer</a>
</span>

<span id="menu2" class="popMenu">
<a href="#" class="menuLink">Definition</a>
<a href="#" class="menuLink">Buy laser printer</a>
<a href="#" class="menuLink">Search laser printer</a>
</span>

<span id="menu3" class="popMenu">
<a href="#" class="menuLink">Definition</a>
<a href="#" class="menuLink">Buy ink cartridge</a>
<a href="#" class="menuLink">Search ink cartridge</a>
</span>

<span id="menu4" class="popMenu">
<a href="#" class="menuLink">Definition</a>
<a href="#" class="menuLink">Buy toner cartridge</a>
<a href="#" class="menuLink">Search toner cartridge</a>
</span>

You can place these spans anywhere on your webpage because we'll use style rules to set their visibility property to hidden. Change the # (pound) signs to your specific links and change the link text to your desired link text. Note that each span is identified by a unique "id" attribute, and that their appearance is defined by the "popMenu" style class.

To define a keyword, place it within an html span element as shown below for the keyword "inkjet printer".

There are basically two different types of printers
in use by the home consumer today. The
<span class="popLink">inkjet printer</span>
or bubble jet printer squirts tiny droplets of ink
on the surface of the paper to form an image.

Note that the appearance of this span is defined by the "popLink" style class. We'll use the span element's onmouseover event to execute a Java Script function named "popUp" to display the keyword's related popup menu. We'll use the span element's onmouseout event to execute a Java Script function named "delay" to close the popup menu. Below is an example of the complete "inkjet printer" keyword span.

<span class="popLink" onmouseover="popUp(event, 'menu1')" onmouseout="delay()">inkjet printer</span>.

The "delay" function will create a short delay, after which it will call a third function named "popHide" to actually close the popup menu. But before I describe the Java Script functions, I provide you with the complete style code for the example.