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:
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":
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:
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:
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