6 Replies Latest reply on Nov 7, 2008 6:57 AM by heathrowe

    Rollover effects are lost when exported as Fireworks HTML

    paulkirtley Level 1
      I created a simple graphic in Fireworks, which has a rollover effect. The finished symbol was assigned a LINK, ALT and TARGET in Fireworks, and exported as an .htm file. Every slice was selected and saved in the IMAGES folder.

      After I placed the htm file in Dreamweaver, I previewed it in Safari and FireFox. It worked perfectly. After I uploaded it to the Web Host, however, all effects were lost.

      Here is the link: http://www.jlwa.net

      The effects are limited to the word "enter."

      If anyone sees what I'm doing wrong, please let me know. THANKS!
        • 1. Re: Rollover effects are lost when exported as Fireworks HTML
          pixlor Level 4
          You have a single image with an image map. To have a rollover, you need multiple images...and it would be better if you sliced the design into separate pieces (like a puzzle of rectangles) and only swapped the "enter" image. If you swap the whole image, your visitors will probably notice a glitch. (Erm, check the SEO on splash pages without content.)

          Also, as long as you have Dreamweaver, it would be much better to build that page and the rollover in Dreamweaver. Fireworks is a graphics application. Dreamweaver is the Web authoring environment and it does a much better job.
          • 2. Re: Rollover effects are lost when exported as Fireworks HTML
            paulkirtley Level 1
            Lorraine, thanks for your advice. I will do as you recommended, and build the page in Dreamweaver. I have to tell you, though, my experience has not been good doing the build in Dreamweaver. Perhaps it is because I'm on a Mac...I don't know...everytime I try that the finish result pulls apart at the seams when viewed on a PC.

            On this page, for example: http://www.jlwa.net/projects.html, the Accordion (when viewed on a PC) has horizontal gaps between each of the Accordion's tabs, and all of the text, despite being set at "left" justification, appears as if I centered it. I'm still wrestling with this page to get it right.

            Thanks again - Paul
            • 3. Re: Rollover effects are lost when exported as Fireworks HTML
              pixlor Level 4
              quote:

              Originally posted by: paulkirtley
              Lorraine, thanks for your advice. I will do as you recommended, and build the page in Dreamweaver. I have to tell you, though, my experience has not been good doing the build in Dreamweaver. Perhaps it is because I'm on a Mac...I don't know...everytime I try that the finish result pulls apart at the seams when viewed on a PC.

              On this page, for example: http://www.jlwa.net/projects.html, the Accordion (when viewed on a PC) has horizontal gaps between each of the Accordion's tabs, and all of the text, despite being set at "left" justification, appears as if I centered it. I'm still wrestling with this page to get it right.

              Thanks again - Paul

              Hmm. It looks okay in Chrome, but I see it pulls apart in IE 7. That is probably due to inconsistencies in CSS rendering between the different browsers. Using Fireworks won't help you with that. You're going to have to modify the CSS to account for browser differences if you want it to address those little spaces. The CSS for the Spry accordion element is very simple and I don't see any hacks to get around the box model differences that I know people use. You might ask on the Dreamweaver forum, but it certainly isn't anything that Fireworks is going to fix for you.

              Also, there are some other maintenance issues I see in your page. Your navigation images are directly using the Fireworks naming scheme, such as jlwa_main_r2_c2_f2.jpg. When you export your images from Fireworks, give them good, reasonable names so that you can maintain the code. You have a row of unnecessary spacer gifs in your header. You should pull your CSS out into a separate file, rather than having it embedded into each and every file. That way, you only need to edit it in one place to have it take effect everywhere. Give your styles meaningful names, too, descriptive of their purpose. You have style1, style4, style5. If you want to edit them, you don't even know what they are without digging into the HTML code.

              • 4. Re: Rollover effects are lost when exported as Fireworks HTML
                paulkirtley Level 1
                Lorraine, I hate to bother you again, but I'm still waiting for word from the Dreamweaver Forum on one issue and I was wondering if you had any experience with it.

                I have a site I'm working on, which when viewed on a PC running Explorer, all of the text shows up "centered." This one really has me stumped. Do you have any idea how this can be fixed?

                Also, do you know where I could read about how to fine-tune a Spry Accordion to avoid the horizontal gaps I'm getting between tabs? There are times when I wished the whole world was on a Mac.

                Thanks,

                Paul
                Boerne, TX
                • 5. Re: Rollover effects are lost when exported as Fireworks HTML
                  pixlor Level 4
                  I'm sorry Paul. I'm a bit of a Luddite, myself. I am tentative when it comes to using CSS. I tried following the dictates of the W3C folks in their ivory towers, and I quickly found myself in a morass of hacks...this browser must be hacked for this quirk, that browser must be hacked for that quirk... UGH! It can be done, but you have to know what your'e doing. And I don't. Not really. I know enough to know that complex design in CSS takes knowledge.

                  Try a Google search for Spry accordion. Also look for CSS discussion groups. See if there are any where there's active discussion. Google for the specific issue you're having and you'll probably find that someone else had the same problem.

                  Or, just wait a bit and maybe someone who's more at home in CSS will post something helpful. :)
                  • 6. Rollover effects are lost when exported as Fireworks HTML
                    heathrowe Most Valuable Participant
                    quote:

                    Originally posted by: paulkirtley

                    Also, do you know where I could read about how to fine-tune a Spry Accordion to avoid the horizontal gaps I'm getting between tabs? There are times when I wished the whole world was on a Mac.



                    Hey Paul, you may want to scour through the Spry Forum as well for some specifics.
                    http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602

                    Here is an article on the specifics for the Accordian Widget
                    http://labs.adobe.com/technologies/spry/articles/accordion_overview/
                    I suspect the thing to look for (spacing issue) may have to do with the CSS Rules for the Widget.
                    h