|
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.
| 
Free Downloads
RSS Feed