You'll get your Mac news here from now on...

Help TMO Grow

Subscriber Login

Advertising Info


The Mac Observer Express Daily Newsletter


More Info

Site Navigation

Home
News
Tips
Columns & Editorials
Reviews
Reports
Archives
Search
Forums
Links
Mac Links
Software
Reports
Contact

Computing With Bifocals
by Nancy Carroll Gravley

A column for people who remember what
the world was like before there was color.....




More Spiffy Web Page Tips
May 31st, 2000

At the end of last week's column I addressed the fairly significant error that I made the week before when I said that Adobe PageMill did not have a spell checker. Not only that, but I discovered from reader Nancy Blossom that there is a great user manual included on the PageMill installation CD. While following up on Nancy's information I also discovered that there are just loads of things included on that same CD to help you design your web page. Apparently these items don't automatically download when you install Adobe PageMill, but they are all there on the CD. Since they take up a great deal of space, it is probably a good idea to just leave them on the CD and work from it as needed. There are page arrangements, bullets, buttons, images, backgrounds, etc. It actually will take you some good time to review everything that PageMill includes, but it might be worth it to you if you are just starting out the web page adventure or are making a new one.

Today's column will offer tips on putting depth into tables, and creating mouseovers.

How Can I Put An Image Inside A Table to Give It the Appearance of Depth?

Using Adobe PageMill, first create a table on your page. When you click on the table icon you will get a box that looks like this.

Adobe PageMill Table Guide

To make the depth, simply put a 7, 8, or whatever number you want to work with in the box labeled "border." That's all it takes. While in PageMill you can change the size of your table by clicking on the outside edge and when you get a yellow box with "handles" in the corner, dragging the handles until you have the size you want. The HTML code automatically changes at the same time. To add an image you can drag and drop (hold down the mouse button on the image, keep it held down while you drag the image to the new location, release the mouse button) an image anywhere on the PageMill page and then drag it again into the center of the table. The table will adjust to fit the image and you are all set. You can also use the image icon in the task bar at the top of the page, but drag and drop is really much easier. If you are using a background, the border of your table will assume the same color and texture when viewed on the net.

I think it is important to remember that what you see on your PageMill creation page is not necessarily the way the completed page is going to look on the web. When I first started doing this I though I had done something wrong when the transparency didn't seem to work or the table borders didn't assume the background color while in PageMill, and I kept trying to figure out what I had done incorrectly. It was only when I uploaded the page to the net and then looked at it that I realized that it was working fine.

When selecting and saving images for your web page, be sure to save them all in the same folder. It will save you lots of time when you are ready to upload them.

Example of an Image Inside of a Table

 

How Do I Create A Mouse-over? Do I Even Want To Create A Mouse-over?

I admit that it took me a couple of weeks, off and on, to finally get this mouse-over stuff figured out and working correctly. However, there was a great sense of satisfaction when I finally made it work and it is a totally cool addition on your web page. Besides, knowing how to do it definitely moves you up on the respect scale with those all important critics--your children, and we are going to do the Cliff Notes version. By that I mean I am not going to try and explain why it works (good idea since I haven't a clue). Rather I hope to give you a template that you can use to make your own. Also, for those hardy among you, I will include a couple of web sites that offer good tutorials as well as explaining why they work. Below are the two images I worked with plus a sample of the finished product.

 
   

GIF images used in mouse-over

blue

Mouse-over

(drag your mouse across the image)

To create mouse-over images requires a JavaScript. This is what gives the computer the directions necessary to make it all work. Actually, unless you are the person who had to create it in the first place, this is a pretty simple little script. Once you are comfortable working with JavaScripts you can expand in a number of ways according to your own interests. There are 2 parts to this, the first is the script itself.

<HEAD>
<script language="JavaScript">
<!--
browsok = (((navigator.appName == "Netscape")
&& (parseInt(navigator.appVersion) >= 3))
|| ((navigator.appName == "Microsoft Internet Explorer")
&& (parseInt(navigator.appVersion)>=3)));
if(browsok){

// MouseOn
blue1 = new Image(50, 50);
blue1.src = "image2.jpg";

// MouseOff
blue0 = new Image(50, 50);
blue0.src = "image1.jpg";

}
function BNB_mouseon(n){
if(browsok){
imageON = eval(n + "1.src");
document [n].src = imageON;
}
}
function BNB_mouseoff(n){
if(browsok){
imageOFF = eval(n + "0.src");
document [n].src = imageOFF;
}
}
// -->
</SCRIPT>
</HEAD>

The only things you have to touch are the items I marked in red.

  • blue is the name I choose for my mouse-over
  • 50, 50 is the size of my graphic. Both images must be the same size, but they don't have to be square, that just happens to be applicable to the images i choose.
  • image1.jpg and image2.jpg are the names I assigned to my two graphics.

To set your image size correctly you can try one of two things. You can guess and keep working with them until they look good on your page. Or, while you have your image open in Graphic Converter, look at Show Information under the Picture pull-down menu. The first item there will give you the size of your image in pixels. Simply replace the 50, 50 above with the pixel numbers for your own image. Also using Graphic Converter you can adjust two images so that they end up the same size by selecting Size from the Picture pull-down menu.

Any Java Script must be placed on your page between the <HEAD> and </HEAD> because the script is giving directions to your page as opposed to being a part of your page. If you wanted more than one mouse-over on your page you would repeat the MouseOn and MouseOff sections above with the identifiers for the new images. Keep in mind though that the more graphics you add to your page the slower it will open. Your script would look something like this.

// MouseOn
blue1 = new Image(50, 50);
blue1.src = "image2.jpg";
red1 = new Image(250, 75);
red1.src = "image3.gif"

 

// MouseOff
blue0 = new Image(50, 50);
blue0.src = "image1.jpg";
red 0 = new Image (250, 75);
red 0 = "image4.gif"

The second half of the mouse-over process goes within the body of your page. Where depends on where you want it to appear.

This is an example, and again you only have to change the parts that are in red.

<a href="mouse.shtml"
onmouseout="BNB_mouseoff('blue')" onmouseover=
"BNB_mouseon('blue');return true ">
<img src="/location/image1.jpg" name="blue"
WIDTH=50 HEIGHT=50 VSPACE=3 border=0 alt=blue></a>

I thought I might briefly discuss some of the problems I ran into. Whether or not you experience any of these problems may depend on where and how you are creating your web page, but if nothing else, they may give you a clue where to start if you have problems. First of all, I was confused as to why there is only one real link, as I was accustomed to seeing links for every image used. I thought that if there was two images there should be two links. That assumption was based on my lack of understanding of how JavaScript works. For my buttons, one is all I needed. The second problem had to do with identifying the appropriate location for this part <img src="/images/image1.jpg" . I think the only reason I kept working with this is that I work for a bureaucracy and I get paid to get frustrated. I tried storing the images (both of them must be together even though you only reference one here) in the images folder (which eventually worked). Then I tried storing them in the primary folder where I store the page.html files. Then I tried changing from gif's to jpg's or vice verse. Then I couldn't seem to figure out whether or not to put the / in front of the location or not, etc.

My advice is just keep working with it, making subtle changes and checking it out until it works. There is no simple answer because everyone uses different locations, ways to upload, etc.

The source that I found the most helpful for all these mouse-over issues is this one:

http://bignosebird.com/js/mouse.shtml

These two are also very good and offer some ways to experiment further once you have conquered the subject.

http://wsabstract.com/javatutors/image2.shtml

http://wsabstract.com/

Reader Comments

Marty Pfeiffer sent a funny note this week that i want to share. Marty came across a 1961 ad for the IBM Selectric Typewriters. Those of us who remember when this revolutionary typewriter was introduced using a golf ball typing element, may also remember that these typewriters came in colors and the colors were used as strong selling points to sell the machines. Marty notes:

I find it interesting that IBM itself credits the color choice as a
primary factor in the Selectric's success. And here I thought IBM was all
stuffy and not at all fun... perhaps they should rename themselves iBM?

If you have any tips, suggestions, or other comments about this, or any other Mac topics, send them to me so that I can share them with other readers.


Copies of Nancy's book Tips, Hints, and Solutions for Seasoned Beginners Using Apple Macintosh Computers With OS X are available in PDF download versions  for US$9.57 and in print version for $18.15 plus $4.00 shipping.   To view sample pages and get ordering information visit the September 14, 2004 column.


Post your comments below.
Check out Nancy's complete index of all her columns for the most complete list of tips anywhere. The list is categorized and is a great reference when you are looking for help!

A Capacious Catalog Of Computer Tips

Talking to a generation that remembers what the world was like before there was color, covers issues for people who don't care how their computer works, but rather what their computer and the internet can do for them.

Nancy has a Master's degree in Human Services Administration and prior to her retirement she worked for almost 30 years in field of mental health and mental retardation. She has been a Mac user for 11 years, and has recently developed an avocation of teaching basic computer skills in both group and one-to-one settings.


Most Recent Computing With Bifocals Columns

Other "Computing With Bifocals" Columns



Today's Mac Headlines

[Podcast]Podcast - Apple Weekly Report #135: Apple Lawsuits, Banned iPhone Ad, Green MacBook Ad

We also offer Today's News On One Page!

Yesterday's News

 

[Podcast]Podcast - Mac Geek Gab #178: Batch Permission Changes, Encrypting Follow-up, Re-Enabling AirPort, and GigE speeds

We also offer Yesterday's News On One Page!

Mac Products Guide
New Arrivals
New and updated products added to the Guide.

Hot Deals
Great prices on hot selling Mac products from your favorite Macintosh resellers.

Special Offers
Promotions and offers direct from Macintosh developers and magazines.

Software
Browse the software section for over 17,000 Macintosh applications and software titles.

Hardware
Over 4,000 peripherals and accessories such as cameras, printers, scanners, keyboards, mice and more.

© All information presented on this site is copyrighted by The Mac Observer except where otherwise noted. No portion of this site may be copied without express written consent. Other sites are invited to link to any aspect of this site provided that all content is presented in its original form and is not placed within another .