Jump to content


Photo

Rollover text color change


  • Please log in to reply
2 replies to this topic

#1 Genestoy

Genestoy

    Fireworks Sparkle

  • Members
  • Pip
  • 2 posts

Posted 21 October 2011 - 07:56 AM

Hi newbie here with a problem that I hope someone can help me with. I am working in Fireworks 8 and have a header logo with a navigation bar at the bottom of the logo that has aprox 8 links for page navigation on the website which all works fine. I would like the white text in the nav bar to change to a different color when rolled over? Currently the white text lettering has no button but displays on a dark blue background with a rectangle slice/hotspot larger than the text lettering. Is there a way to do this without making a separate button for all 8 nav links and then placing them into the header?
Thanks in advance for any help anyone can provide as I have spent considerable time trying to make this work!
Gene

#2 DaveH

DaveH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 343 posts
  • Location:San Francisco CA USA

Posted 21 October 2011 - 09:59 AM

You've probably heard this already, but if you're just trying to get the text to change color on rollover, then it's better to do this with CSS (using styles for a:link and a:hover) than to do it with images and JavaScript from Fireworks. You would do this by editing the HTML and CSS for the page, not by generating graphics in FW.

However, if you want to do this in FW without creating buttons and without using the navbar tools in FW, then the easiest way is to use simple image swap on rollover. You'll need two frames (they are called states in newer versions of FW, but you'll see a panels for Frames in FW 8) - frame 1 is the "up" (or regular) view, and frame 2 is the "over" view. Copy the navigation bar from frame 1 and paste it into frame 2, then change the color of the text in frame 2. Go back to frame 1 and draw rectangular slices over each navigation button/tab. You can assign a behavior (from the behaviors panel) and a link (from the Properties inspector at the bottom of FW, below the drawing area) - select a slice, add a link in the Properties inspector, then open the behaviors panel - click on "+" to add a new behavior and choose image swap or simple rollover, and define the behavior as "swap image from frame 2 on rollover" and check to "restore image on mouseout." Do this for each navigation option to create rollovers for each.

Hope this helps!

Dave

#3 Genestoy

Genestoy

    Fireworks Sparkle

  • Members
  • Pip
  • 2 posts

Posted 21 October 2011 - 01:35 PM

You've probably heard this already, but if you're just trying to get the text to change color on rollover, then it's better to do this with CSS (using styles for a:link and a:hover) than to do it with images and JavaScript from Fireworks. You would do this by editing the HTML and CSS for the page, not by generating graphics in FW.

However, if you want to do this in FW without creating buttons and without using the navbar tools in FW, then the easiest way is to use simple image swap on rollover. You'll need two frames (they are called states in newer versions of FW, but you'll see a panels for Frames in FW 8) - frame 1 is the "up" (or regular) view, and frame 2 is the "over" view. Copy the navigation bar from frame 1 and paste it into frame 2, then change the color of the text in frame 2. Go back to frame 1 and draw rectangular slices over each navigation button/tab. You can assign a behavior (from the behaviors panel) and a link (from the Properties inspector at the bottom of FW, below the drawing area) - select a slice, add a link in the Properties inspector, then open the behaviors panel - click on "+" to add a new behavior and choose image swap or simple rollover, and define the behavior as "swap image from frame 2 on rollover" and check to "restore image on mouseout." Do this for each navigation option to create rollovers for each.

Hope this helps!

Dave


Thanks Dave, I will give that a try!
Gene