Help quick ratio buttons with javascript

Discussion in 'JavaScript' started by liamsorsby, Mar 24, 2009.

0
  1. #1
    i need my ratio buttons, when clicked, to change my main product image. each button changing the main image into a different image. but i'm unable to use the value="" in the input as it has a variable already. i need about 13 ratio buttons.
     
    liamsorsby, Mar 24, 2009 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    First, you would probably be better off using a drop-down select if you are gonna have 13 different ones. 13 _radio_ buttons won't by any criteria look good.
     
    PoPSiCLe, Mar 24, 2009 IP
  3. liamsorsby

    liamsorsby Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    yer that was an option i was considering is there anything anybody can think of that will help coding wise?
     
    liamsorsby, Mar 25, 2009 IP
  4. lp1051

    lp1051 Well-Known Member

    Messages:
    163
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Hi,

    just a hint :

    in your form add something like :
    <input type="radio" onclick="setImage('p1.jpg')" />Product #1
    <input type="radio" onclick="setImage('p2.jpg')" />Product #2
    ....
    <input type="radio" onclick="setImage('p13.jpg')" />Product #13

    I expect the main product image is always on one place, you just need to switch them, right?
    so there could be somewhere IMG tag + add there some ID
    <img src="default_product.jpg" id="pic" />

    then in javascript file or block inside HTML define function setImage(image_url)
    function setImage(image_url)
    {
    var product_image = document.getElementById('pic'); //here you reference the IMG tag ID
    product_image.src = image_url;
    }

    It is not the only way of doing this, just wanted to show you possible solution in rather simple way. Hope it helps
     
    lp1051, Mar 25, 2009 IP