What is the best way to create an anchor link from the "smoothies", "food" and "coffee" links in the navigation to different spots on this page? The page is a whole image so not sure how to do it. Hotspot (which I don't know how to do)?
Thanks much!
As you said, the link itself would be added to the hotspot's Link field as '#anchorname'. I'm not sure whether the target of the link can be indicated in Fireworks or not; however, it's fairly simple to accomplish this directly in the HTML by adding an id attribute to the opening tag of the appropriate element (such as a div, heading, or paragraph). For example:
<div id="anchorname">
Hey Groove25, thanks for the response.
I didn't want to hard code each anchor since I share the png with several designers.
I figured out one way of getting around it using Fireworks. If you want to create an anchor link, you will need to do two things:
(1) Create a button/hotspot on the top of the page and link to #anchor_name
(2) Create another slice on the bottom of the page (or wherever you want the link to go to within the page) and edit the HTML properties of the slice. You will be adding good ole' HTML in there to define the anchor name. I just added <a name=anchor_name></a> into the HTML field.
That's a neat solution! But I'm not sure it's going to work for you.
I wasn't familiar with the HTML option for slices within the Properties Inspector... From what I can tell, it swaps out the image content of the slice with HTML code (or text wrapped in an HTML paragraph tag). So you're not modifying the properties of the slice, but the content of the slice. And the content that you're adding in place of the image, in your example, is an empty link tag.
Keep in mind that the Hotspot is the link, not the slice. So you shouldn't need to add a link element to your slice, you just need to add a name or id attribute to establish the anchor. (Hope my terminology isn't off there, but I think you understand what I mean.) Incidentally, I totally forgot about the use of the name attribute! I think I've always used id instead, which might actually be the current preference in HTML5 (not totally sure of this, though).
So I still suspect that you'll need to add the id or name attribute at a later stage in your workflow... Whatever you do, don't forget the quotes around the value of the attribute (as in my original example).
My apologies, as I don't use the Hotspot or Slice features of Fireworks and I'm working from an older version (FW8), so if there's a newer panel or method to add the needed attribute, I can't steer you to it.
FOLLOW-UP: I'm sorry I missed this earlier... To change the value of the name attribute for a selected slice, use the text field at the top left of the Properties Inspector (next to the icon and beneath the 'Slice' label). So simply enter the name without any quotes (e.g., anchor_name), and it will appear in the exported HTML in the proper format. Cool?
FOLLOW-UP: I'm sorry I missed this earlier... To change the value of the name attribute for a selected slice, use the text field at the top left of the Properties Inspector (next to the icon and beneath the 'Slice' label). So simply enter the name without any quotes (e.g., anchor_name), and it will appear in the exported HTML in the proper format. Cool?
I feel like I might be missing something. I experimented with both a hot spot and a slice.
I created a hot spot and then named the name attibute via the Properties Inspector. When I looked at the code, I couldn't find any instance of the name. I only saw the ALT.
So then I created a slice for kicks, tried adding the name attribute to the Properties Inspector and when I looked at the code, there were only names and ids for the image, not <a>. What's even more interesting, is that it added "_s1" to the end.
The Hotspot does not need the name or id attribute; it just needs the anchor link, starting with the pound sign (e.g. #anchor_name), which is entered in the Link field, as you were doing previously.
The Slice (that you're targeting with the link) is what needs the name or id attribute, and you can enter the value for that in the text field, next to the icon and beneath the 'Slice' label (e.g., anchor_name). I don't know why FW would be adding '_s1' to the end of the name, unless there were multiple items with the same name or id, or if it's a slice-naming preference of some kind. But it's not a big deal: If you know that '_s1' will be added to the name, then adjust the anchor link in the Hotspot Link field accordingly (e.g., #anchor_name_s1) so that it matches.
(The fact that you tried to apply the same name/id attribute to both the Hotspot and the Slice might have caused FW to add the '_s1' to the slice name; Try again, making sure not to apply a name attribute to the Hotspot. You may find that the '_s1' is no longer being added.)
Glad it's working.
FYI: I perhaps should have mentioned that any given name/id (e.g., anchor_name) should be used just once per page. If you tried to assign the exact same name/id to multiple elements on a page, you'd be defeating the purpose of assigning a unique identifier to each element. It would be like giving two HTML pages the same name. So, for example, if you had multiple anchors and were naming them generically, you might use a scheme like 'anchor_name_1', 'anchor_name_2', etc. More commonly, you'd try to use a more specific, meaningful name for each anchor, reflective of its content or purpose within the page—this might be a subject/topic (e.g., 'birthday', 'recipe', 'book promotion') or the section/structure (e.g., 'footer', 'main', 'article_1', etc.).
North America
Europe, Middle East and Africa
Asia Pacific