SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing a link's url using javascript?

    hello, i have very little working knowledge of writnig my own JS functions, i usually take existing scripts and tweak them to do what i need, but i can't find a starting point with my current problem.

    I need to have a <a> tag on a page send the user to different locations according to the preview image the user selects.

    to elaborate, if the user clicks a preview image of chair#1 i need a link at the bottom of the page to send the user to a page about chair#1, if the user clicks a preview image of chair#2, the same link at the bottom of the page sends the user to a page about chair#2

    If each preview image sets a variable to a string that represented the desired URL, then there could be a function that uses that variable to create the relavant URL link, and the <a> tag could call that function.

    I just can't find any scripts that would give me a base to start from, and i don't know how to even start writing something of this nature.

    help please!
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use DOM to change the href attribute

    Hello Ashley

    If image chair#1 is clicked, let a script change the href attribute of the link. Add a id to each image and eventlisteners to react when clicked (use Mike's x library from cross-browser.com, there are functions for events too. Much easier than creating them yourself!).

    The code to change href could be something like this:
    Code:
    function chooseChair(noOfChairClicked){
      var varHref;
      switch (noOfChairClicked){
        case 1:
          varHref = "/chair1.html";
        break;
        ........ (as many cases as needed...)
      }
      document.getElementById('id_for_link').href = varHref;
    }
    Hope this can help you on the way...

    Michael

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Michael! Welcome to SPF!

    That's a great suggestion!

    It's cool having another Michael onboard (you know, of course, that "Michael"s are gonna take over the world)!


  5. #5
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using in action

    hi Michael #1 and #2, thanks for the suggestion, i'm trying to implement but i think i need a little elaboration of how to use the function you have created
    Code:
    function chooseChair(noOfChairClicked){
      var varHref;
      switch (noOfChairClicked){
        case 1:
          varHref = "/chair1.html";
        break;
        ........ (as many cases as needed...)
      }
      document.getElementById('id_for_link').href = varHref;
    }
    is the "case 1:" text written above actual code? or is it a comment? Also the 'id_for_link' text in the last line, where does that come from?

    finally, each RollOver event for the thumbnails will call "javascript: chooseChair('greenchair') for instance, or can it only pass a number such as chooseChair(1)?

    thanks for your help!
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?


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
  •