4 Replies Latest reply on Jan 12, 2009 8:30 PM by pixlor

    White rectangle appears on exported Gif Rollover

    brightbelt Level 1
      Hi, I'm on FW CS3 and DW CS3 (Using Intel iMac). I'm exporting a simple Gif rectangular rollover from FW into Dreamweaver. While I'm not a web expert, I've done plenty of rollover navigation graphics in Fireworks. The browser preview of the rollover looks good in FW, but when I export it to Dreamweaver, it technically works but I get a white rectangle at the bottom of the graphic when I rollover with the mouse - a white triangle which I do not want to be there.

      I've tried various differences in positioning my slice in FW and I've tried Dreamweaver Html and switching to Generic Html in case that made any difference. Neither change helped.

      At the risk of cyber-embarrassment, I've published my graphic (It's a rollover to start an email) to this url:
      Frank Bright Contact Page

      I appreciate any help on solving this; it could be something basic which I've overlooked.
      Many Thanks, Frank B.
        • 1. Re: White rectangle appears on exported Gif Rollover
          brightbelt Level 1
          I'm replying to update my situation. I've gotten most of it settled by tightening the slice to the object.
          But it still is a rectangular slice over a rounded rectangle, so there are going to be slight points that are blank on the points of the square - it seems there's no way around that unless I do CSS which I'm not adept in.

          I am still open to any tips or pointers to improve this.
          Many Thanks,
          Frank B.
          • 2. Re: White rectangle appears on exported Gif Rollover
            pixlor Level 4
            Ah yes. The old "I want to anti-alias a transparent gif over a gradient background" problem.

            If you had a solid background, then you could just anti-alias your rounded rectangle against your background color and not worry about transparency. Since you need those corners to be transparent, you have to have a hard edge to them, because the .gif format only has one value of transparency.

            Making your slice no bigger than your object helps file size (a good thing), but it won't help your corners. My advice there is to first export a flattened, 24-bit .png image where your rounded rectangle is placed over a background color that is an average of what the background gradient is (trial and error may come into play, here, later). Then, import THAT image and flood fill the corners with something wild, like yellow or bright green. Next, go to File >Image Preview and set your format to .gif. In the Transparency drop-down box, select Index Transparency. Click the dropper tool on the left (Select transparent color) and click on your wild corner color. Your corner tips will become transparent, but you will maintain some anti-aliasing to the overall background color.

            Try your image in your Web page. You may need to tweak the background color a bit to make it look the best.

            • 3. Re: White rectangle appears on exported Gif Rollover
              brightbelt Level 1
              Thanks Pixlor, I'll have to tackle that in the morning and see what I can do.
              Many Thanks, Frank B.
              • 4. Re: White rectangle appears on exported Gif Rollover
                pixlor Level 4
                Well, this is a bit awkward. I had a Private Message from Frank asking for a clarification, but when I reply I get an error. So, Frank, if you're reading...


                What I've done is this:
                Take your Fireworks image, where you have the rounded rectangle vector object (and text and whatever else on your background color) and export (Image>Preview, not Save) that to a PNG 24, but save it with a different file name or in a different folder.

                Hmm...I've JUST realized there's a slightly easier way! Okay...open this flattened image. Go to Modify>Canvas>Canvas Color and set that to transparent.

                Select the magic wand selection tool. In the Properties palette, set the tolerance to 0. Click in one of the corners, then press your Delete key. That portion of your image will become transparent. Do the same for the other corners.

                Now export to GIF format and make sure to select Alpha Transparency so that your corners come out, well, transparent.

                If this doesn't work for you, bump your thread:
                http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=14&catid=193&threadid =1401716