Design & Publishing . / . WEB . / . rollover . / .results.html . . . . . . . . . . . . Submit . / . Review a Site . / . Latest submissions 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?