Date: Thu, 24 Jun 1999 18:50:34 From: register@support2.atweb.com Subject: Web Site Journal - Vol. 2, No. 25 Dear Cheshire, Delivering the best information possible to improve and maintain your site has always been the goal of the staff at the Web Site Journal. It is my goal as the newly appointed Editor to continue to deliver insight from industry experts, useful tips and tricks and interesting statistics. I have already heard from many of you welcoming me aboard and I look forward to hearing from more of you as Web Site Journal grows. In this issue we will focus on using Java to add new spice to your site. Jennifer Burrows editor@websitejournal.com http://WebSiteJournal.netscape.com ______________________________________________________________ W E B S I T E J O U R N A L Vol.2, No.25__________________________________________________ ____________________________http://WebSiteJournal.netscape.com "Delivering Insight from Web Experts to Web Site Owners" June 24,1999 IN THIS ISSUE ARTICLE: THE MIGHTY MOUSEOVER TIPS & TRICKS: DON'T LOOSE YOUR HUE METRICS: JUST JAVA <<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>> MEASURE the effectiveness of UPDATING YOUR WEBSITE - Use HITOMETER to determine your current traffic situation - IDENTIFY who is coming, how many, when they come, etc. - MEASURE the change in quality and quantity of traffic after you've updated the site - ANALYZE detailed information for better decision-making For a FREE trail go to: http://websitegarage.com/P=wsj-hi2/turbocharge/hitometer/ <<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>> ARTICLE____________________________________________________ _______________________________________THE MIGHTY MOUSEOVER So there you are, surfing the net, scrolling across a web page, only half interested in the content, when suddenly out of nowhere a bland, black bullet point turns bright red and without thinking you click on it. Another victory for the tiny but mighty mouseover! "Mouseover" is the term used to describe an image that changes whenever your cursor glides over it. A mouseover is wordless shout-out. A "hey,look at me!" The show-off of graphical web design. While I've seen plenty of mouseovers that add nothing more than a cheap bells+whistles effect to a site, there are certainly a number of great uses for them. As a visual indicator they are incredibly useful when used in conjunction with small image text. How many times have you loaded a page you didn't want simply because you miss-clicked on some minuscule piece of gif text? If you're going to bother designing your pages with navigational text images instead of using straight forward text you might as well consider taking the extra step and take advantage of mouseovers to communicate even more dynamically with your audience. Another use of mouseovers that meets my persnickety design standards is when they're used to provide more information about the object underneath the cursor. For instance, a product picture might transform into a price on a mouseover, communicating the cost only to interested viewers and keeping the overall page design more streamlined and less cluttered. Ultimately the mouseover is one of the most common dynamic imaging tricks because it's small, fast and easy to write. How easy? Just keep reading. Before you can include a mouseover effect on your web page you'll need two images: one image for the regular display (the "Off" image) and one image for the mouseover (the "On" image). Most mouseovers are used in conjunction with small images. Since you want the effect to be immediate you won't want to use large images that force your audience to wait. For this reason mouseovers tend to be written for small .gif images of text or buttons. It's important to use images that are the same size because the image that appears on the mouseover will size itself to the image that appears normally. The final caveat that bears mentioning is that a mouseover won't work with an imagemap. To write a mouseover, you begin by inserting the image you want displayed under normal circumstance (what I think of as the "Off" image) with a basic image tag. In the following example I'm going to describe how to make a blue happy face ("blueface.gif") turn into a red happy face ("redface.gif") whenever someone puts their cursor over the face. Since I want the blue happy face to be the "Off" image I'll begin by writing: [Happy Face] The first step in transforming the standard image tag like the one above into a mouseover tag is to give it a name. You need to name the image so that when you write the code for the mouseover you'll have some way of referring to it without confusion. To do this, insert the NAME attribute into the IMG tag using a simple name (i.e., avoid using spaces or punctuation in your names). I'll call my happy face image by the name "face": [Happy Face] Next you'll need to put the image inside a normal tag just as you would for any other kind of image link. Might as well link my happy face to with its smilie brethren at the EFF: [Happy Face] So far it's pretty simple isn't it? In fact, I'd be surprised if you're not falling asleep from all the familiarity. Truthfully, the rest isn't really that complicated either. The only thing left to do is to add two attribute phrases to the tag and the static image becomes a changeling. The two attributes you'll need are OnMouseOver and OnMouseOut. Set the OnMouseOver to point at the image you want to use when a mouse goes over it and set OnMouseOut to the image users see normally. For my example the code would be: [Happy Face] The first thing you should notice about the above code is that the image's name (as specified by the IMG tag NAME attribute) goes in between the "document." and the ".src". If I'd named my image "my_face_image" then my OnMouseOver attribute would have been: OnMouseOver="document.my_face_image.src='redface.gif';" The other two things to note are that you absolutely have to use single quotations around the image file names and you absolutely have to include the semicolon at the very end just before the closing double quotation. This formatting isn't arbitrary. The number one cause of broken mouseovers is faulty syntax so always triple check your code. (By the way, you can see this example in action at: http://sites.netscape.net/heidipollock/mouseover.html) That's it. You're all done. In case you're wondering, the mouseover code is Javascript. The downside with using Javascript is that a small but persistent percentage of web surfers won't be able to see your mouseovers because their browsers don't understand the language. But the upside is that now you can tell all your friends and colleagues that, sure, you've worked with Javascript. About the Author Heidi Pollock (heidipollock@netscape.net) is a frequent contributor to Web Site Journal and can also be found dispensing her Web site knowledge to the masses on HotWired and iVillage. In her spare time she likes to conjure up images of baklava and wreak havoc on her netizen friends. <<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>> SEVEN SIMPLE STEPS TO A SUCCESSFUL BUSINESS ONLINE With eBusiness Basics, Netscape has carefully selected the core web-based services you need to do business online -- from getting email, to building your site, to finding customers and selling online. And they're FREE! Find out more: http://netscape.com/netcenter/smallbusiness/onlineessentials/start.html <<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>> TIPS & TRICKS_________________________________________________ __________________________________________DON'T LOOSE YOUR HUE Whether you're creating GIFs for mouseovers, GIF-text or any other reason, you might want to do so using the Browser- or Netscape-Safe Palette. The 216-color safe palette shared by all operating systems is the only way to insure that your images look exactly the same to all viewers. A normal color monitor displays a minimum of 256 colors, 40 of which are set aside for system resources. Because operating systems vary, so do the 40 colors they respectively reserve. The remaining 216 colors that all systems have in common are based on a mathematical calculation which uses six values each for red, green and blue. 6x6x6=216 which is how we get a 216 color palette "safe" to use on all platforms. Despite the advantages of universality you probably won't want to use this limited palette for color photographs because the altered results are usually unattractive. But for simple GIF images there's no reason not to design for cross-platform compatibility. You can read more about this or download the palette from: http://www.netscapeworld.com/common/nw.color.html METRICS_______________________________________________________ _____________________________________________________JUST JAVA Sun Microsystem's Java has hit the headlines numerous times in recent times, but just how many developers are using Java? Predictions have stated the usage of Java would soar by up to 60%, but recent findings by Evans Marketing Services show the growth is not as rapid as predicted. North America developer usage of Java March 1999 43% September 1998 43% Outside North America developer usage of Java April 1999 40% September 1998 30% Source: Evans Marketing Services http://www.evansmarketing.com _____________________________________________________________ Web Site Journal, Copyright 1999 by Netscape. May be reproduced for noncommercial purposes as long as attribution is given. To Subscribe e-mail editor@websitejournal.com and type subscribe in the Subject line. To Sponsor e-mail editor@websitejournal.com ______________________________________________________________ We use Web Site Post Office to send out our newsletter. To create and send your newsletters for free visit: http://www.WebSitePostOffice.com