52 users online (0 members and 52 guests)  


  Results 1 to 10 of 10

Related

  1. swapped image links for portfolio    Forum: Javascript Forum
    Replies: 11
  2. Replies: 1
  3. Hidden links on an image    Forum: Javascript Forum
    Replies: 2
  4. image swap with links???    Forum: Javascript Forum
    Replies: 4
  5. border on image links    Forum: HTML Forum
    Replies: 11
  1. #1
    judi's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2008
    Posts
    2

    one image three links

    I'm new to this forum and pretty new to web design period. I have an image, really a kind of menu in image form. I need to have three different areas of the image link to three different pages or points in the same page. I understand, or at least I think I do, about anchors and names to mark the destination spot on the page. But I have no idea how to code the image for the three different links.

    Help please.

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: one image three links

    If I understand you correctly, you might find this link useful:
    http://www.w3schools.com/TAGS/tag_map.asp
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    judi's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2008
    Posts
    2

    Re: one image three links

    Thanks Rangana. I have already figured it our using a link I found by searching the forum. Wish I had had this one first. It is much easier to follow.

    Now I just need to make one of my links go to a specific point in the page and I'm done. Maybe you have a helpful link for that also?

    Judi

  4. #4
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: one image three links

    Here's a basic example:
    HTML Code:
    <a href="#area1">Area1</a>
    <div id="area1" style="margin-top:900px;margin-bottom:20px;">
    Content of Ariea 1
    </div>
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  5. #5
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: one image three links

    Actually, it needs to be done as follows:

    HTML Code:
    <a href="#area1">Area1</a>
    
    <a name='area1'></a>
    <div id="area1" style="margin-top:900px;margin-bottom:20px;">
    Content of Ariea 1
    </div>
    The name value of the anchor tag is what tells the link where to go.

  6. #6
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: one image three links

    Quote Originally Posted by jthayne View Post
    Actually, it needs to be done as follows:

    HTML Code:
    <a href="#area1">Area1</a>
    
    <a name='area1'></a>
    <div id="area1" style="margin-top:900px;margin-bottom:20px;">
    Content of Ariea 1
    </div>
    The name value of the anchor tag is what tells the link where to go.

    jthayne,
    I suggest you try check the code I've given to see if it was working or not. I tested it on IE and FF (at least), which gives me this certainty that it work.

    Let me know how it does at your end.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  7. #7
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: one image three links

    Quote Originally Posted by rangana View Post
    jthayne,
    I suggest you try check the code I've given to see if it was working or not. I tested it on IE and FF (at least), which gives me this certainty that it work.

    Let me know how it does at your end.
    I stand corrected. Either way will work. I had always understood the name tag was the correct way to do it, but guess I was wrong. OOPS.

    Thanks for the pointer, rangana.

  8. #8
    usename's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    1

    Re: one image three links

    cool one xD

  9. #9
    DeanDanson's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2008
    Posts
    1

    one image three links

    <a href="#area1">Area1</a>

    <a name='area1'></a>
    <div id="area1" style="margin-top:900px;margin-bottom:20px;">
    Content of Ariea 1
    </div>

    Now I just need to make one of my links go to a specific point in the page and I'm done. Maybe you have a helpful link for that also?

  10. #10
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: one image three links

    The code you have in your post, Dean will do exactly what you are asking. The position the link goes to is based on the location of the name or id attribute within the page.



Tags for this Thread