Skip navigation
Currently Being Moderated

Hot spot?

Jun 2, 2009 11:36 AM

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!

 
Replies
  • Currently Being Moderated
    Jun 2, 2009 1:52 PM   in reply to quality11

    What do you mean the page is a whole image? I saw html and css.

    That's more a Dreamweaver question. Add an Anchor link or a hotspot in dreamweaver.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 2, 2009 2:02 PM   in reply to quality11

    Oh i got it, sorry . Add your anchor link near a photo, but if the whole page is an image, this is not possible.

     

    Maybe dividing it to smaller images could help.

    You should ask in the Dreamweaver forum.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 1:48 PM   in reply to quality11

    So is there no way to add an anchor link to hot spots in Fireworks?

     

    I'm assuming Fireworks would just need to allow the definition of the anchor name and then link the hot spot to "#anchorname".

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 2:30 PM   in reply to punopunopuno

    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">

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 3:53 PM   in reply to groove25

    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. 

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 5:17 PM   in reply to punopunopuno

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 6:08 PM   in reply to groove25

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 6:53 PM   in reply to punopunopuno

    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.)

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 7:46 PM   in reply to quality11

    Groove25 you've done it!

     

    I changed the Hotspot link field to "#anchor_name_s1" and it works. Fancy!

     

    Anytime I add more slices, it will always just add '_s1' at the end. Fireworks will throw a dialog box if you try to name a slice with a name already in use.

     

    Thanks so much for the help!

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2012 8:16 PM   in reply to punopunopuno

    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.).

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points