Internal Linking Structure Elements Strategy - Graphical Navigation Icons or Buttons
(Page 3 of 8 )
Graphical navigation icons and buttons are as popular as hypertext navigation. The graphical icon or button is a graphic, generally a GIF or JPEG formatted image, that links to either an absolute URL or relative URL. An example of a graphical navigation button would look like this <a href="page.html"><img src="pics/button.gif"></a>. The <a href="page.html"> is already familiar to you. As you can see the <img src="pics/button.gif"> is in the place of the anchor text. "img" stands for image and "src" stands for source, so the piece of code says image source is found in the directory pics and is named button.gif. Wrapping the <a href="page.html"></a> around the image activates that image as a link.
There are many obvious benefits to using the graphical navigation icons or buttons as primary text links. One of the benefits includes using high-impact fonts and colors that are not supported through regular HTML. Increasing the look of the links on your site can help attract more clicks by the end user to the page of interest.
However, search engines can not see the graphic and if the graphic is really a graphical representation of a word - such as About Us - then how does a search engine know that' In all cases where graphics are used as navigation, it is wise to use alternative text tag within the source code of the image. For example, one would embed the alternative text into the above example as such:
<a href="page.html"><img src="pics/button.gif" alt="Short Text Explaining Where the Graphic Link will Take you"></a>
The alt tag (alternative) gives search engines as well as screen readers (used by the blind) the ability to assign a meaning to the graphic, in place of the anchor text. Hence, it is important to use keyword specific words that apply to the page you are linking to in the alternative tag area.
There are additional concerns that can arise when using graphical navigation within a site. Many Web designers use mouseovers, a JavaScript that automatically switches the image on the screen to a different image when the end user's mouse's over the graphic. Web designers use this to show the user when he or she is within a section. They primarily change the color or size of the image to show the difference. The problem is not with the graphic, it is with the JavaScript code that generates the mouseover affect. Let's take a look at the following example of a JavaScript that enables the classic mouseover affect:
<a href="page.html"
onmouseover="changeImages('nav_page', 'pics/nav_page_mouseover.gif'); return
true;"
onmouseout="changeImages('nav_ page', 'pics/nav_page.gif'); return true;">
<img name="nav_page" src="pics/nav_page.gif" alt="Page
Contents">
</a>
As you can see the old simpler version of the graphic link has turned into this long complex piece of code. Lets break the code down to better understand how it functions. Start with "onmouseover" and lets begin to read: On mouse over of the image (entering the image area), initiate to change the image to nav_page_mouseover.gif from nav_page.gif. On mouse out (leaving the image area) return the image from nav_page_mouseover.gif to nav_page.gif. Most search engines have trouble reading the code within the JavaScript initiated mouseover scripts. It is thus best to try to not use mouseovers or if you use mouseovers make sure to use hypertext links as a secondary internal linking structure.
JavaScript not only activates the mouseover action, it is also widely used to construct pull down menus. We will now discuss the JavaScript or DHTML/CSS dropdown or pulldown menu navigational elements.
Next: JavaScript or DHTML Dropdown or Pulldown Menus >>
More Search Optimization Articles
More By Barry Schwartz
