Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

image map to select checkboxes

Options
  • 10-02-2009 4:15pm
    #1
    kersti
    Registered Users Posts: 79 ✭✭


    I have a form that has a list of counties that a user can choose via checkboxes, they can select as many as they like.

    I want the user to be able to click on an image to make the selection as well and once they've clicked for the appropriate checkbox to be selected.

    Does anyone have some code snippets that will do this?


Comments

  • Options
    #2
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    Try using jQuery:

    JAVASCRIPT

    // jQuery version of "onload"

    $(document).ready(function() {

    // create a function for when an area in the map is clicked

    $("#irishMap area").click(function() {

    // firstly, get the county from the href

    selectedCounty=$(this).attr("href")+"]").substr(1);

    // then, find the checkbox that has the same value as the selected county

    cBox=$("input.selectCounty[value="+selectedCounty+"]");

    // now, tick that checkBox

    cBox.attr("checked","checked");

    // finally, tell the browser not to follow the href link of the area
    return false;

    });

    });

    HTML CODE

    <map id="irishMap">
    <area...... href="#Limerick"></area>
    <area......
    :
    </map>

    <input class="selectCounty" type="checkbox" id="selectLimerick" name="county[]">Limerick


  • Options
    #3
    frodo_dcu
    Closed Accounts Posts: 119 ✭✭frodo_dcu


    no Javascript or imagemaps needed just proper semantic code;

    [HTML]<input name="country" value="irl" id="irl" type="checkbox" /><label for="irl"><img src="irl.gif" alt="Ireland" /></label>

    <input name="country" value="uk" id="uk" type="checkbox" /><label for="uk"><img src="uk.gif" alt="UK" /></label>
    [/HTML]


  • Options
    #4
    kersti
    Registered Users Posts: 79 ✭✭kersti


    frodo_dcu wrote: »
    no Javascript or imagemaps needed just proper semantic code;

    I'm not sure I follow how that would work. I have an image that has different areas in it that I want to be clickable, not a bunch of individual images.


  • Options
    #5
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    frodo_dcu wrote: »
    no Javascript or imagemaps needed just proper semantic code;

    [HTML]<input name="country" value="irl" id="irl" type="checkbox" /><label for="irl"><img src="irl.gif" alt="Ireland" /></label>

    <input name="country" value="uk" id="uk" type="checkbox" /><label for="uk"><img src="uk.gif" alt="UK" /></label>
    [/HTML]


    Sorry, frodo.....she said "counties", not "countries", and even if it was "countries" there's also no way the above would work with irregular-shaped countries - on mainland Europe, for example.

    I'm not even sure it would work for Ireland alongside the UK.

    So kersti - best option (so far) is the one I posted above.


  • Options
    #6
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    You've already got a good solution, but here's how I'd do it (for what it's worth).
    [html]
    <html>
    <head>

    <script language="javascript">
    function myclick(whichone)
    {
    if (document.getElementById(whichone).checked == true) {
    document.getElementById(whichone).checked = false;
    } else {
    document.getElementById(whichone).checked = true;
    }
    }
    </script>

    </head>

    <body>

    <p>
    <a href="#" onClick="myclick('box1')">link 1</a><br>
    <a href="#" onClick="myclick('box2')">link 2</a><br>
    <a href="#" onClick="myclick('box3')">link 3</a><br>
    <br>
    Checkbox 1 <input type="checkbox" id="box1"><br>
    Checkbox 2 <input type="checkbox" id="box2"><br>
    Checkbox 3 <input type="checkbox" id="box3"><br>
    </p>

    </body>
    </html>
    [/html]
    No proper semantic code needed, just javascript and imagemaps. :pac:


  • Advertisement
  • Options
    #7
    frodo_dcu
    Closed Accounts Posts: 119 ✭✭frodo_dcu


    kersti wrote: »
    I'm not sure I follow how that would work. I have an image that has different areas in it that I want to be clickable, not a bunch of individual images.
    Sorry I must have mis-read I hadn't realised it was a map image I thought it was county/country flags type of situation.


  • Options
    #8
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    DonkeyStyle \o/ wrote: »
    You've already got a good solution, but here's how I'd do it (for what it's worth).
    [html]
    <html>
    <head>

    <script language="javascript">
    function myclick(whichone)
    {
    if (document.getElementById(whichone).checked == true) {
    document.getElementById(whichone).checked = false;
    } else {
    document.getElementById(whichone).checked = true;
    }
    }
    </script>

    </head>

    <body>

    <p>
    <a href="#" onClick="myclick('box1')">link 1</a><br>
    <a href="#" onClick="myclick('box2')">link 2</a><br>
    <a href="#" onClick="myclick('box3')">link 3</a><br>
    <br>
    Checkbox 1 <input type="checkbox" id="box1"><br>
    Checkbox 2 <input type="checkbox" id="box2"><br>
    Checkbox 3 <input type="checkbox" id="box3"><br>
    </p>

    </body>
    </html>
    [/html]
    No proper semantic code needed, just javascript and imagemaps. :pac:

    Yup - very similar solution.....just less markup and chance for error with the jQuery version :)


Advertisement