3 Replies Latest reply on Jan 23, 2008 10:24 AM by pixlor

    Fireworks mouse over link change color

      Hi, I designed a couple pages using Fireworks however i cannot seem to make the link change colors when i mouse over them, i really dont understand how to use the css styles, i mean i know css and html properly, whenever i export css layers and open this in dreamweaver there are all images

      <div id="real%20indexr4c2r2c6" style="position:absolute; left:267px; top:209px;width:78px; height:20px;z-index:1; visibility:visible"><img name="Home" src="real%20index_r4_c2_r2_c6.gif" width="78" height="20" border="0"></div>
      <div id="real%20indexr4c2r3c4" style="position:absolute; left:140px; top:210px;width:89px; height:17px;z-index:2; visibility:visible"><img name="real20index_r4_c2_r3_c4" src="real%20index_r4_c2_r3_c4.gif" width="89" height="17" border="0"></div>
      <div id="real%20indexr4c2r4c2" style="position:absolute; left:47px; top:211px;width:55px; height:16px;z-index:3; visibility:visible"><img name="real20index_r4_c2_r4_c2" src="real%20index_r4_c2_r4_c2.gif" width="55" height="16" border="0"></div>

      Now these are all images, i cannot work with them, if i try to take out the images complely and use
      <a href="aboutus.html">About us</a>

      This will mess up the entire page

      This is the same issue when i export them as html and images only

      I just need to get a mouse over to change the link color

      Can someone point me in the correct direction, with links
      I dont want css tutorials, i want to know how to get them to change link color on mouse over without messing up my page

      I did the entire site with fireworks, all link and text

        • 1. Re: Fireworks mouse over link change color
          JoeDaSilva Level 4
          The HTML that Fireworks produces isn't designed to be production code. You're attempting to do something you should be doing in Dreamweaver.

          Fireworks is a graphics application.
          • 2. Re: Fireworks mouse over link change color
            krash_master Level 1
            Yes it seems so JoeyD, Well What i did was to create all the text in fireworks, so i'm not suppose to do that, I want to export the images so that when i insert the code in those images the page dont break and get all messy, someone from another forum mentioned something about putting the sliced images into table, but its really confusing, can you post a detailed message on how to insert images into table or give me some related links so i can add text to those images.

            I designed the full page using fireworks.
            <a href=" http://i272.photobucket.com/albums/jj180/krash_master/index.gif">This</a> is what the html page looks like, i want when i load the .html file in firefox i can highlight the text and links

            What should i do and shouldnt do?
            • 3. Re: Fireworks mouse over link change color
              pixlor Level 4
              Let's just look at the top part first, your header and your navigation bar.

              The part of your graphic that has "Hopewell High School, Pioneers for excellence" and your Web address needs to be one graphic. This is your header.

              Your navigation bar is the for "Home Chairman Principal Staff Students Sports About Us." You need two graphics for each phrase. One set should be the black on tan you have and the other set should be whatever color combination you want to have when you mouse over them.

              The first step is to make the slices. Guide lines make slicing an image much easier. If you turn on the rulers (check Help for how to do that if they aren't on), you can click in the rulers and drag guide lines onto your image. These lines don't become part of your image, though. Drag a horizontal one below your header and another below your navigation bar. Sometimes, it helps to zoom in to get the line in just the right place. Next, drag vertical lines between "Home" and "Chairman," between "Chairman" and "Principal," etc.

              Now, select the slicing tool (light green rectangles). Drag a slice rectangle over your whole header. The slice will show up in the Web layer. You can click on the eye to show or hide it. You can select the slice itself and delete or resize it if you need to, just like regular rectangles. Double-click the slice name ("Slice") and change its name to "header." This way, when you export your slices, the resulting file will have the name header.gif or header.jpg (depending on the format you choose).

              Similarly, draw slices over each word. The slice tool will snap to the guide lines, making it easier. Rename each slice as you draw it, so you can tell which is which. Zooming in can make this process easier.

              At this point, you can export your slices and you have part of your images done.

              There is a fancy way to specify normal and roll over states for buttons. If you want to go that route, check the Help. I usually just change my text, rename my slices to add "-ov" to the end and re-export. Now, I have my buttons for the mouse-over state.

              You should have 15 images.

              Go to Dreamweaver and make a table with two rows and seven columns. In the first row, merge all the columns and put your header graphic in it. In the second row, first column, go to
              Insert>Image Objects>Rollover Image
              For your original image, you want the "Home" image which is black on tan. For the rollover image, you want the one that has your mouseover effect. A name is nice, but not necessary. Alt text is recommended. Use "Home" for both. Put the URL of your home page (index.html? default.htm? whatever it is). Then click the OK button.

              Repeat the process for the other six buttons in your nav bar. Save the file and see how it looks so far.

              You really should learn some HTML. It isn't all that difficult. It's less difficult than learning Fireworks and Dreamweaver, I think. I like this book: TextHTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro (although I have the 5th Edition).

              You might also find this online Web Style Guide helpful.

              For general design principles, I've found The Non-Designer's Design Book to be full of useful advice. (Interesting! The 3rd edition is out! I think I'll get a new one.)

              Good luck!