HTML Guide - Designing Navigation Buttons (Continued)

[Archican]

However, in PowerPoint 2002, the default pasted image is a PNG file. This is a fairly new type of web image format. Although I haven't tested it, I'll assume it'll work as a rollover image. The only issue is that I'm not sure how many browsers can use this format and assume many of the older ones won't recognize it. So you'll have to test the PNG format and decide whether you want to use it. Again, just go to the saved clipart path and copy out the files if you decide to save/use them this way. If there's a way to change the format in PowerPoint, I'd sure love to know about it. But I can only assume, if you need to change the format, that you'll have to use a program such as Paint Shop Pro or Microsoft Photo Editor to convert each button's file type to GIF or JPG. But at least this process will save you from having to cut out the buttons, which can be a pain if you're not used to doing it.

Dynamic Images with JavaScript
You've designed up all your buttons and cut them all out so you now have a set of ON buttons and a set of OFF buttons. It's time to break out your HTML editor and code the images to display differently when the mouse moves over them.

Although you can use VBScript or DHTML (Dynamic HTML) in web pages, only Internet Explorer (or rather, Netscape won't!) can view this type of code. JavaScript got the World Wide Web Consortium's nod of approval several years ago as the approved script language for all web browsers. So to make sure the code will work for all your visitors, you'll want to use JavaScript, unless you're coding for an Intranet where everyone in the office is using Internet Explorer as their default browser. Internet Explorer will read both VB Script and JavaScript, whereas Netscape will only recognize JavaScript.

Note! I remember hearing the announcement that JavaScript got the W3C's approval back in May 1997 while attending an MVP summit at Microsoft. At that time, I'd been busy learning VB Script and was depressed at the thought that this meant that I'd wasted my time and would now need to learn a new language. I remember saying aloud "Geez, there's the nail in VBScript's coffin!" Immediately, a fellow MVP, who had been rudely tapping away on his laptop during the session, spun around and loudly said "NO it doesn't!! VB Script will still remain very important!" (Geez, do ya think the guy was a little passionate about VB?<g>) Well, I did have to learn yet another code language, but he was right, VB Script is far from dead. I'm sure you've heard of ASP pages (Active Server Pages). They are the web pages with the .asp extension. These pages are coded at the server level and then the plain HTML is rendered to the browser. ASP pages work with Microsoft's IIS (Internet Information Server), what you'd use to create a web server if you're using Windows as the server operating system. And since IIS is from Microsoft, and although you can write ASP pages using JavaScript, VB Script is the default language of choice for coding ASP pages to IIS. So all that learning didn't go down the tubes!

Also, before I get into the code, know that if you're using Front Page or Dreamweaver as your editor, these WYSIWYG (what you see is what you get) editors have tools that you can use to easily create these roll over images.

In Dreamweaver, you can hit Ctrl/F2 to turn on the Object toolbar. There you'll find the Image Rollover button under the Common options. Click it and the Rollover dialog box will appear which is easy to use. Just give the image collection a name, insert the two images. Check the Preload option and then add the link to where the user will go when the button is clicked.

Image of Rollover dialog box in Dreamweaver.

Hit F12 to view the active browser view to see the images activated.

Although I don't use FrontPage, I do have the program and it was pretty simple to figure out how it works. Insert your OFF button image. Select the image and click Format/DHTML Effects. Yes, this will use JavaScript code. The DHTML (Dynamic HTML) toolbar will appear. Choose Mouse Over as the event; choose Swap Picture as the action and click the final drop down to select Choose Picture, and go find the image you want to have swapped out.

Image of DHTML effect dialog in Front Page.

When you click the Preview tab, you'll see the action.

If you don't have a WYSIWYG editor, you'll need to code the images by hand. Normally, when writing script, you need to add a reference to the script you'll be using. But the mouseover event is part of the HTML HREF code, so you would write the code as follows:

<a href="http://www.mousetrax.com"
onMouseOver="document.navHome.src='userimages/ON_Home.jpg' "
onMouseOut="document.navHome.src='userimages/OFF_Home.jpg' ">

<img src="userimages/OFF_Home.jpg" alt="My HomePage" border="0" name="navHome">

</a>

The first line of the code provides the link to the web page that will be called when the user clicks the button. Then you set the onMouseOver and onMouseOut events. Set these events to the document image (in the next line of code) by giving it a name link. My name is navHome. You'll notice in the code above that the mouse events have the navHome name in their code lines. Then notice, too, that the image (img) code sets the name="navHome". This links the two sets of code together. Give each button code a new name, such as navHome, navLinks, etc.

The onMouseOver is the ON button, then swap it out with the onMouseOut event to return the OFF button to the view. The next line is the standard image code. Be sure to add the name argument to link it with the previous code. Then close the link with the ending anchor </a> code. Create one set of code per button. If you layout your page with a table, put the code inside the table cell for each button.

Most editors will add an option to preload the images. This means that they'll be loaded before someone attempts to call the image up by moving the mouse over it. If you don't have the ability to use FrontPage or Dreamweaver to create a JavaScript preload, you can cheat by loading all the image files yourself at the top of your page. Use the standard <img src="http://www.profusehost.net/forum/images/myButton.jpg> code and you can pile them all up along the top line of your document. The trick is to set the height and width to "1". This will cause them to load when the document is called, but they'll be so tiny you won't see them. Then when the user moves the mouse over the button, there won't be a download delay since the image was already loaded and is in the cache (pronounced "cash"...your PC temporary storage).

Have fun creating your own navigation buttons or rollover images. If you need graphics, you can download a ton of web graphics from many pages on the web. Just use your favorite search engine to find "web graphics." Or you can hit the Microsoft Design Gallery and find a bunch of goodies to use.

Go to the first topic: http://www.profusehost.net/forum/htm...n-buttons.html