Design & Publishing . / . WEB . / . rollover . / .results.html . . . . . . . . . . . . Submit . / . Review a Site . / . Latest submissions

Mr. Pixelsmith Duz Web Graphix

What's a rollover cost?

A number of DT&G and WebDesign Review readers have written with inquiries about creating rollover buttons. So we decided to experiment a bit with the process, and do a little research into the books available on the subject. We've come to the conclusion that for every web (html/java) coder, there's a slightly different way of doing it.
__ In a discussion with several of our programmers, we all agreed to the amazing amount of characters and words that are required to generate this simple web page action. Considering that some sites have dozens of rollovers on their pages, it brings us to the question: at what cost do we enjoy such entertainment?
__ We decided to ask the readers of the Designers' Cafe to try their hand at generating a very simple 'rollover' button web page in their favorite html layout program.
__ Here's a single blank web page, no content, no formatting. It was created in the latest GoLive version 5. It was NOT created as a 'site' but just a single page.
(A table of our continuing results is posted below.)
.
1. The "buttons" are two gif files,
___ up.gif - size: 2,373 bytes. (A little over 2K),
___ down.gif - size: 2,045 bytes. (A little over 2K)
.
2. The page structure: File Size: 3,677 bytes (11K on disk)
___ 3,673 characters
___ 502 words
___ 122 lines of text

.
We've heard from these designers who decided to take the challenge.
.
Mike tests "Freeway" first...
Our first testing designer to log on was Mike Swope (SwopeM at kochind.com) who sent the entire suite (Freeeway file, output files, everything) as an attachment.
Test Mike's '
Freeway' version
___ 2,035 characters
___ 261 words
___ 38 lines of text
.
Joyce tests Macromedia Fireworks
Joyce J. Evans, Idea Design, (Joyce at je-ideadesign.com) created a version in Macromedia FIREWORKS: http://www.je-ideadesign.com/rollovertest/fireworks/fwrollover.htm
She comments: "... I'll do Photoshop then I have a new program called Namo which looks
promising. It's not installed so that will take me a little bit.
" Joyce is author of Fireworks 4 f/x and Design (May), and Integrating Fireworks, FreeHand, Flash f/x and Design (Sept.)
___ 1661 characters
___ 285 words
___ 35 lines of text
.
Timothy hand-codes it with BBEdit
Timothy Watson <tlw@cybernicity.com> hand-coded a version in BBEdit so we could see a raw, basic code version. Timothy sez: "... like my mom use to say keep it short and to the point... "
http://www.cybernicity.com/rollover/
___ 1,242 characters
___ 131 words
___ 43 lines of text
__ Editor's note: BBEdit (from BareBones software) is the best darn text editor on the Mac platform. Many of the 'purist' use it exclusively for coding html pages. I use it myself dozens of times each day, and even have it set to "auto-launch" on boot up.
.
Jeremy Logs in with his version generated in ImageReady 2.0
Jeremy Bass ("Egghed" horsefeathers@ntlworld.com) says: "... I was astounded by the complexity and shear size of the files that GoLive had created. You didn't mention the version number of GoLive in the article. I would have thought that different versions will generate different scripts. Although Imageready 2's code is the same as version 3. at: http://homepage.ntlworld.com/horsefeathers/rollover/rollover.html  
___ 975 characters
___ 129 words
___ 31 lines of text
__ Jeremy continues: "... I did some post editing of the html generated by Imageready 2.0 - the package used. But only lin-breaks and spaces. Isn't it ironic that two packages from the same software house generate vastly different code. In fact there is an option in Imageready to 'Include GoLive Code'.
.
Karen sends us rollovers from Macromedia Dreamweaver...
Karen Hromadka from Kramer Printing sent in her Dreamweaver rollover which nets out to
___ 1,594 characters
___ 283 words
___ 38 lines of text
Karen continues: "... Dreamweaver 4 has a very simple 5 step process. Start a new page, Insert Interactive Images/Rollover, Find and name the images, Center the image, Save the file, and you're DONE! Karen's example is at: http://www.kramerprinting.com/DW_rollover.html
Karen Hromadka Web Development, Kramer Printing -- 608-849-1984
.
Michelle followed with a Macromedia Dreavweaver v2 version
Michelle Caldwell <michelle_caldwel@hotmail.com> sent in a version coded in Macromedia Dreamweaver v2, and parked it at: http://www.myherp.com/rollover.htm
___ 1936 characters
___ 239 words
___ 60 lines of text
This time Dreamweaver weighted in at 1.9 K, or 1,936 bytes.
Michelle continues: "... I removed all unneeded HTML code.
IMPORTANT NOTE: The Java Script that makes the Roll Over is unedited Macromedia Dreamweaver v2 "Swap Image" Java Script.
___ To obtain the most efficient code, one MUST HAND CODE.
___ I occasionally work as a free-lance web designer/HTML coder/"Web Master". I use which ever HTML editing software my co-workers use. I have experience with Microsoft FrontPage, Homesite (used to be Allaire but I believe it was purchased by Macromedia, and Macromedia Dreamweaver.
___ I typically recommend Macromedia Dreamweaver to those with a strong design background but little programming/coding skills. (With the warning that they should acquire basic HTML and Java Script knowledge.)
___ For those who are interested in both design and coding, I recommend Homesite.

Now, I guess we need a Homesite user to check in.

Another Dreamweaver...
http://www.geocities.com/martines_ro/content/rollover.htm
.

Results Table:
Software

File (bytes)

Characters

Words

Lines

Adobe GoLive v5

3,677

3,673

502

122

Freeway 2.0

2,032

2,035

261

38

Macromedia Fireworks

1,661

1661

285

35

Hand coded TEXT

1,242

1242

131

43

Adobe ImageReady 2.0

975

975

129

31

Dreamweaver v. 4

1,594

1594

283

38

Dreamweaver v. 2

1,936

1936

239

60


You can see from this table that characters translate into bytes. That's because raw ascii text generated characters are based on a single byte. What's interesting is that the byte to character computations don't seem to jibe. I have no explanation for that. You can take a look at the code and see what you think.
.
Would you like to participate?
.
Just copy the graphics for our rollover (links listed above) -- then generate the same simple web page with buttons in your favorite html authoring program. Then let us know where you've posted it.
__ If you've got a comment, or a tip or trick you'd like to share, or if you'd like Mr. Pixelsmith to answer some of your questions, feel free to contact us! Comments?

.