Getting elements of images

JavaScript
1

Struggling with this one…

I’m trying to have a rating system - where users can rate the page that they are on. One thing I seem to be stuck with is how to get the elements of an image within a form > I’m trying to implement this code I found:


function DisplayFormValues() {
	var str = '';
	var elem = document.getElementById('form1').elements;
	for(var i = 0; i < elem.length; i++) {
		str += "<b>Type:</b>"  + elem[i].type + "&nbsp&nbsp";
		str += "<b>Name:</b>" + elem[i].name + "&nbsp;&nbsp;";
		str += "<b>Value:</b><i>"  + elem[i].value + "</i>&nbsp;&nbsp;";
		str += "<BR>";
	}
	document.getElementById('lblValues').innerHTML = str;
}

<form name='form1' id='form1' method=post action=action_page.php onsubmit='return validate(this)'><b>Here is the question </b><br>
<img name="radio1" id="radio1" src="../images/rate.jpg" onClick="DisplayFormValues();" value="1" />
<img name="radio2" id="radio2" src="../images/rate.jpg" onClick="DisplayFormValues();" value="2" />
<img name="radio3" id="radio3" src="../images/rate.jpg" onClick="DisplayFormValues();" value="3" />
<img name="radio4" id="radio4" src="../images/rate.jpg" onClick="DisplayFormValues();" value="4" />
<input type=reset value=Reset>
</form>

I’m dealing with a lot of ratings so this for loop that I have seems vital but it is not proving easy to get the elements as would be easy with regular radio buttons…

>> any help would be greatly appreciated <<

_with thanks