Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About BTH User Agreement Privacy Site Map Contact Advertise Here News Feeds

HTML5 Solutions: Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

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.

Menu - More
Java Script Programming

Web Design Sections

Easy Cascading Style Sheets

Java Script Quick Reference

Easy Java Script Code

Web Design Tools

Coding Issues

FREE Graphics Warehouse

Eloquent JavaScript: A Modern Introduction to Programming

Eloquent JavaScript Eloquent JavaScript goes beyond the cut-and-paste scripts of the recipe books and teaches you to write code that's elegant and effective. You'll start with the basics of programming, and learn to use variables, control structures, functions, and data structures. Then you'll dive into the real JavaScript artistry: higher-order functions, closures, and object-oriented programming.

Reader Anthony says, "This book is not your typical Javascript book. Others have a utilitarian approach. In stark contrast, Eloquent JavaScript does not merely provide you a checklist of things to learn but rather paints a panorama of the possibilities that programming provides. Javascript is merely the tool used to introduce these to the reader.

Click here for more information.