Share this Page URL

Chapter 9. Images Can Be Links, Too > Why should I use an image as a link? - Pg. 97

Images Can Be Links, Too 97 That's not to say you have to turn every last one of your links into an image (or vice versa). As always, prudence is the order of the day, and a page with just a few image links is more effective than a page that's covered in them. So, for example, you might want to add links to get people back to your home page, to enable visitors to send you an e-mail message, or for important areas of your site. The next two sections also take you through three common uses for image links: toolbars, navigation buttons, and thumbnails. Example 1: A Web Page Toolbar Most modern programs have toolbars with various buttons that give you one-click access to the program's most-used commands and features. You can use image links to provide similar conven- ience to the folks who trudge through your site. The basic process for setting this up involves three steps: 1. Use your favorite graphics program to create buttonlike images that represent important sec- tions of your website (your home page, your guest book, your list of links to Animaniacs sites, and so on). Create <IMG> tags to set up these buttons as image links that point to the appropriate pages. Insert these <IMG> tags consecutively (that is, on a single line) at the top and/or bottom of each page. The consecutive <IMG> tags cause the images to appear side by side. Presto: instant web toolbar! 2. 3. Webmaster Wisdom Every good graphics program has some kind of "Text" tool that enables you to add text to an image. The design of your buttons is entirely up to you, but most web toolbars use some combination of image and text. Personally, I don't have an artistic bone in my body, so I prefer to use "text-only" images, as shown in Figure 9.2. This toolbar is just six linked images displayed on a single line. Here's the HTML code that I used to create this toolbar: <HTML> <HEAD> <TITLE>A Web Page Toolbar</TITLE> </HEAD> <BODY> <A HREF="/Books/index.html"> <IMG SRC="books.gif" BORDER=0></A> <A HREF="/Ramblings/index.html"> <IMG SRC="ramblings.gif" BORDER=0></A> <A HREF="/Toys/index.html"> <IMG SRC="toys.gif" BORDER=0></A> <A HREF="/guestbook.html"> <IMG SRC="guestbk.gif" BORDER=0></A>