This month I was torn about what to concentrate on for this lesson. I probably
should teach you about the pile of miscellaneous codes that you can use
to enhance your pages, such as soft breaks, bullets, lists, bars, etc. Or, we
could have fun and work with graphics. It's been a rough month, so I decided
to go for the fun stuff!
In this article, I'll show you how to create your own navigation buttons. Then
I'll show you how to use FrontPage and Dreamweaver to create a
Rollover (onMouseOver/onMouseOut) effect, which will display
a different picture when the mouse moves over an image. If you don't have a
program to create this effect, I'll show you how to write the code yourself.
Creating Navigation Buttons
I occasionally am asked how I created the web buttons on my site. This article
will explain how to do it. If you go to www.mousetrax.com,
then click the main logo to enter the site itself, you'll see how the navigation
buttons on the site change when you move your mouse over the button. At the
end of this lesson, you'll be able to create this effect, too.
You need to use a graphics program to create your button. I use PowerPoint
to create the initial design of the buttons. Then I use Paint Shop Pro
to finalize the image. But there are other programs you can use. I'll show you
the general idea. Then if you have your own favorite graphics program, you may
find that you can use it to accomplish the same results.
I open a blank page in Power Point and click View/Toolbars/Drawing to
turn on the Drawing toolbar. I select the rectangle tool and draw out
a small square.
A right click is always a good solution to see what you can do to any
selected item. When I right click my square, I see the Format option.
Here I can set the Fill Effects.
Have fun and play around with the different settings to come up with something
you like.
To add text to the image, you can right click and choose Add Text.
When you need to modify the text, you can then click the item, right
click and choose Edit Text. If you need to adjust the text size, you
can hold down Shift and hit Home or End to select the text,
depending on where your cursor is currently located. Then you can adjust the
font size via Format/Font dialog box. You can also set the font color.
Bold fonts usually work best, as they show up better on color buttons.
Another trick would be to use the Word Art feature from the Drawing
Toolbar to add more exciting text.
After you create the Word Art item, you can select it, right click and choose
Format AutoShape and move into the Fill Effect dialog again. Set
your colors for the text. Then select the text and move the text so that it
sits on top of the button. You can click and drag a selection net around
the two items, or click the text and then hold down Ctrl and click the
button to select them both. Right click and you can choose Group to
make the two items into one. This will a make them easier to handle.
Once you get one button to look the way you want it, you can copy and paste
additional buttons, then modify the text to quickly end up with a pile of buttons.
To modify the text, you can click around and you'll eventually select the inside
item when they in a group. If you have trouble selecting the item, you can ungroup
them, make the necessary changes and then regroup the button items. You don't
have to use Group. But if you pile text and/or a graphic on the button, it'll
be safer if you have to move it, if it's set as one item.
If you're planning to have buttons that change when you move your mouse over
the button, you'll need two sets of each button. One will be considered
the on button, the one that will appear when the mouse moves over the
button. The other will be the off button, the one that displays when
it's just sitting there, or after the mouse moves off the button.
Select all the current buttons, copy and paste them onto the page to get a
second set. Now you can go through each to make modifications to the appearance
of the second set. What you do to make them different is entirely up to you.
Maybe you just want to reverse the color shading? Maybe change the outline?
Maybe add a graphic? Maybe do a combination of these items? Just remember not
to change the size of the buttons. They need to stay the same or they'll look
goofy when you mouse over them if one is smaller than the other.
Tip! In case you're not familiar with a few keystrokes, know that you
can hold down the Ctrl key to allow you to move items with the arrow
keys a tiny increment at a time. So if you need to make slight adjustments,
give that a shot. And if you need to resize an item, you can hold down the Shift
key as you drag to resize an item. This will constrain the item so that
you'll get equal movement from the vertical and horizontal changes.
Saving Your Buttons
Now comes the tricky part. There are a few ways to save your buttons, depending
on what programs you have available. I'll show you a few ways to do it and you'll
have to decide which way works best for you or whether you can come up with
a better solution.
I have Paint Shop Pro. And cutting out images is very simple for me
because I do it all the time. How do you think I get all the images for all
these articles! I simply hit Print Screen to take a snap shot of
the image I need, paste the picture from my screen into Paint Shop Pro. Then
use the selection tool to cut out and save the portion of the image I
need. After selecting the image I hit Ctrl/C to copy it, Ctrl/V to
paste it back into the program as an individual image and File/Save As to
save the file out as an individual JPG or GIF file. I name the
file whatever the button is, such as ON_HomePage, OFF_HomePage.
Then I place it into my web /image directory.
When I use PowerPoint to create buttons, I feel the image render smoother when
I view it in full screen slide view. It may be my imagination, but I prefer
to take my screen shot of the button page while in full slide view. So I click
View/Slide Show and then hit my Print Screen button (which may
be abbreviated on your keyboard, look for Prnt Scrn or a similar button)
to save a snap shot of the screen image to the clipboard.
If you don't have Paint Shop Pro, or some other good photo manipulation program,
you can use Paint, as it comes with Windows. And you can use that program
to cut out your buttons. There's just a little trick when using the program.
After you take your screen shot, open Paint (under Start/Programs/Accessories)
and click Edit/Paste to drop the shot on the screen. Click File/Save to
save a copy of your master buttons.
You'll need to choose the Selection Tool. However, when you first paste
in your image, it's already selected, as is the full image you just pasted.
So you'll need to click some other button and then click the square Selection
Tool again to force it to let go of your full page so you can cut
out the buttons you need. Then carefully select your buttons, one by one.
As you select each one, click Edit/Copy To to save just that selected
image off to a single graphic image. If you attempt to copy the image to a new
page and save it out as a file, it'll save the full canvas. So you need to do
it this way to save just the small button selection itself.
The problem here is that the only format you can save to from this menu
is as a BMP (bitmap) and that format is huge, as compared to the
more common JPG or GIF files used on the web. So you won't want
to use this format on your web page! That means there's a little more grunt
work you'll have to do to convert the file to a smaller format.
After you've saved off all your on/off buttons, reopen each one individually
and then click File/Save As and there you'll be able to now save
the file as a JPG or GIF file format. You can later delete the
BMP files.
If you have PowerPoint 2000, you can save off the individual buttons
without much of a problem. If you click the item and choose File/Save As,
the file seems to be saved out much larger than expected. But you can click
Insert/Clipart to open the Clipart Gallery. Create a new group
and hit Ctrl/V and the image will be pasted into your gallery. It comes
out the right size and goes into your gallery as a GIF file. That's great.
It'll show the path where the clipart files are stored. So you can go into that
deep folder path and copy out your buttons to your web's image folder.
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.
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.
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="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.
|
