Menu
So I'm struggling with some javascript, or jquery here. Basically we've taken a simple image of a pc, and created three image mapped areas upon it. Area 1 is the monitors screen, area 2 is the front of the tower, and area 3 is the keyboard.
Below that I've set up three rows of radio buttons, with three buttons in each row, with the idea of capturing the order they select from the image map. What I'm trying to make happen is when the image map 1 is clicked to have the first radio button on the fist row clicked, and then record the order of the selection from there, so that when the next area of the image map is clicked, say area 2, the second button on the second row is clicked. I also need them to be un-selectable if clicked upon twice. I will add hover effects at a latter time to make this intuitive.
So far I've got it where the image map area clicked will select the radio button from the first row that corresponds to the image map selected, say they click area 3, then the third radio button on the fist row is selected. However if they then click area 2 from the image map, then the second button on the first row is selected, and what I need it to do is select the second button on the second row for that. I hope this makes sense. Basically we're trying to record the order of their selection with radio buttons. 3 image map areas, three buttons per row, with three rows.
This is what I have so far.
<script type="text/javascript">
var order = 0;
function retainOrder(stuff) {
var findMe = "CUST_" + stuff;
var orgLoc = document.getElementById(findMe);
if (orgLoc.checked)
{
order=order + 1;
var newString = "RADIO" + radio + "_" + stuff;
document.getElementById(newString).checked = true;
}
else {
var anotherString = "RADIO" + radio + "_" + stuff;
document.getElementById(anotherString).checked = false;
order=order-1;
}
}
</script>
</head>
<body>
<div id="imagemap"><img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" onclick="document.getElementById('radio0').checked = true">
<map name="Map">
<area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1 "name="CUST:1" value="1" %CUST:1% onclick="document.getElementById('radio0').checked = true"/>
<area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" name="CUST:2" %CUST:2% onclick="document.getElementById('radio1').checked = true"/>
<area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" %CUST:3% name="CUST:3" onclick="document.getElementById('radio2').checked = true"/>
</map>
<p>
<div>
<input type="radio" name="radios" id="radio0" value="0" />
<input type="radio" name="radios" id="radio1" value="1" />
<input type="radio" name="radios" id="radio2" value="2" />
</div>
<div>
<input type="radio" name="radios" id="radio3" value="0" />
<input type="radio" name="radios" id="radio4" value="1" />
<input type="radio" name="radios" id="radio5" value="2" />
</div>
<div>
<input type="radio" name="radios" id="radio6" value="0" />
<input type="radio" name="radios" id="radio7" value="1" />
<input type="radio" name="radios" id="radio8" value="2" />
</div>
If anyone can help me out here I would be truly grateful. Thank you.
548
Here's an edited Vanilla JS solution.
window.onload = function () {
var order = 0, checkedAreas = [],
mapClick = function (e) {
var m, n, start,
buttonNumber = e.target.id.split('_').pop(),
buttonName = 'radios' + buttonNumber,
buttons = document.getElementsByName(buttonName);
if (!checkedAreas[buttonNumber]) {
buttons[order].checked = true;
order += 1;
checkedAreas[buttonNumber] = order;
} else {
start = checkedAreas[buttonNumber];
checkedAreas[buttonNumber] = 0;
buttons[start - 1].checked = false;
for (m = 0; m < 3; m++) {
buttons = document.getElementsByName('radios' + m);
for (n = start; n < 3; n++) {
if (buttons[n].checked) {
checkedAreas[m] = checkedAreas[m] - 1;
buttons[n].checked = false;
buttons[n - 1].checked = true;
break;
}
}
}
order -= 1;
}
};
document.getElementById('Map').addEventListener('click', mapClick);
};
A live demo at jsFiddle.
I've edited the code after your comment. Now it toggles the corresponding radio button when clicking an area, and moves other checkings using clicking order.
I've added named groups to your HTML, like below. You can change the order of the devices ("columns") by changing the order in input groups.
<input type="radio" name="radios1" id="radio0" value="0" />
<input type="radio" name="radios0" id="radio1" value="1" />
<input type="radio" name="radios2" id="radio2" value="2" />
<input type="radio" name="radios1" id="radio3" value="0" />
<input type="radio" name="radios0" id="radio4" value="1" />
<input type="radio" name="radios2" id="radio5" value="2" />
<input type="radio" name="radios1" id="radio6" value="0" />
<input type="radio" name="radios0" id="radio7" value="1" />
<input type="radio" name="radios2" id="radio8" value="2" />
Also I've changed numbers in ids of areas to zero-based.
149
This should give you an idea of what to do:
working jsFiddle here
$(document).ready(function() {
click_order = 0;
$('map area').click(function() {
var areaID = $(this).attr('id');
var areaNum = areaID.split('_')[1];
areaNum = areaNum - 1 + click_order; //-1 b/c radio btns are zero-based
$('#radio' +areaNum).prop('checked',true);
(click_order >= 6) ? click_order = 0 : click_order += 3 ;
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
