SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can you add a jump link to an image?

    What is the best way to create a jump link/named anchor from the "smoothies", "food" and "coffee" links in the navigation to different spots in the menu on this page? The page is a whole image so not sure how to do it. Would I use a hotspot (which I don't know how to do)?

    Thanks much!

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Not sure if it's possible with a single image, though I'm not sure how this was made! So, if you can assign anchors to the sections you want to target from the nav links you can do it.

    You need to define an anchor:
    Code HTML4Strict:
    <element id="anchor">
    Then from the nav links target that id:
    Code HTML4Strict:
    <a href="#anchor" title="anchor">Link</a>
    The name "anchor" can be whatever, just make sure each one you create is unique.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Right -- I am familiar with named anchors. The page is created with one background image. I was wondering if there's anyway to add anchor links to it.

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    -- I am familiar with named anchors. The page is created with one background image. I was wondering if there's anyway to add anchor links to it.
    No, but you could add anchors to the page itself and position them in the right spots according to the page background. You can rather use the anchors ids as targets instead of adding name attributes.

    Checking the image...

    Add some empty anchors to the html, last before the closing tag of body. E.g.:
    Code:
    <a id="smoothies"></a>
    <a id="food"></a>
    <a id="coffee"></a>
    Then position the anchors at top/left of spot and give them a width to pull the spot into view.
    Code:
    #smoothies {
    	position:absolute;
    	top:400px;
    	left:400px;
    	width:300px;
    }
    #food {
    	position:absolute;
    	top:1150px;
    	left:0px;
    	width:400px;
    }
    #coffee {
    	position:absolute;
    	top:1100px;
    	left:450px;
    	width:300px;
    }
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So glad there's a way :-). However, I'm not following you. I added the below and it's not working. Somehow, the nav links need to connect to each spot.

    Here's what I added to html:

    <a id="smoothies"></a>
    <a id="food"></a>
    <a id="coffee"></a>

    </body>
    </html>

    Added this to css:

    #smoothies {
    position:absolute;
    top:400px;
    left:400px;
    width:300px;
    }
    #food {
    position:absolute;
    top:1150px;
    left:0px;
    width:400px;
    }
    #coffee {
    position:absolute;
    top:1100px;
    left:450px;
    width:300px;
    }

    And this to navigation:

    <div id="sidebar">
    <ul id="nav">
    <li><a href="../index.html">home</a></li>
    <li><a href="../menu.html#smoothies">smoothies</a></li>
    <li><a href="../menu.html#food">food</a></li>
    <li><a href="../menu.html#coffee">coffee</a></li>
    <li><a href="../catering.html">plan a party</a></li>
    <li><a href="../photo.html">photo gallery</a></li>
    <li><a href="../about.html">about us/contact</a></li>
    </ul>
    </div>

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have not tested your case, but if it doesn't work in all browsers; maybe insert a space in the empty anchors:
    Code:
    <a id="smoothies">&nbsp;</a>
    <a id="food">&nbsp;</a>
    <a id="coffee">&nbsp;</a>
    Sorry I missed the links.
    I think it is better to point directly to the anchors, to make sure the page is not reloaded.
    Code:
    <div id="sidebar">
    <ul id="nav">
    <li><a href="../index.html">home</a></li>
    <li><a href="#smoothies">smoothies</a></li>
    <li><a href="#food">food</a></li>
    <li><a href="#coffee">coffee</a></li>
    <li><a href="../catering.html">plan a party</a></li>
    <li><a href="../photo.html">photo gallery</a></li>
    <li><a href="../about.html">about us/contact</a></li>
    </ul>
    </div>
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erik, sorry it took so long to get back. Awesome. That worked -- in FF at least (actually, just checked IE7 too so others probably work)! Thanks so much. So glad to know this can be done.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •