image map to select checkboxes

kersti · 10-02-2009 3:15pm #1

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?

Liam Byrne · 10-02-2009 3:32pm

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

frodo_dcu · 10-02-2009 6:35pm

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]

kersti · 10-02-2009 9:04pm

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.

Liam Byrne · 11-02-2009 1:48am

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.

DonkeyStyle \o/ · 11-02-2009 5:44am

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:

frodo_dcu · 11-02-2009 11:58am

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.

Liam Byrne · 11-02-2009 1:51pm

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

image map to select checkboxes

Comments