Hello,
I want to create a rating option for my page, but run into a small problem. My script so far looks like this:
*******************
<html>
<head>
<title>Rating</title>
<script type="text/JavaScript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
a[i])&&x.o
Src;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_pre
loadImages
.arguments
; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&p
arent.fram
es.length)
{
d=parent.frames[n.substrin
g(p+1)].do
cument; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.
layers.len
gth;i++) x=MM_findObj(n,d.layers[i]
.document)
;
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
uments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=
3)
if ((x=MM_findObj(a[i]))!=nul
l){documen
t.MM_sr[j+
+]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<body>
<form>
<img src="starEmpty_5.jpg" width="65" height="13" border="0" name="starsF" id="starsF" usemap="#Stars">
<map name="Stars" id="Stars">
<area shape="rect" coords="1,1,13,13" href="#1" onmouseout="MM_swapImgRest
ore()" onmouseover="MM_swapImage(
'starsF','
','starFul
l_1.jpg',1
)">
<area shape="rect" coords="14,1,26,13" href="#2" onmouseout="MM_swapImgRest
ore()" onmouseover="MM_swapImage(
'starsF','
','starFul
l_2.jpg',1
)">
<area shape="rect" coords="27,1,39,13" href="#3" onmouseout="MM_swapImgRest
ore()" onmouseover="MM_swapImage(
'starsF','
','starFul
l_3.jpg',1
)">
<area shape="rect" coords="40,1,52,13" href="#4" onmouseout="MM_swapImgRest
ore()" onmouseover="MM_swapImage(
'starsF','
','starFul
l_4.jpg',1
)">
<area shape="rect" coords="53,1,65,13" href="#5" onmouseout="MM_swapImgRest
ore()" onmouseover="MM_swapImage(
'starsF','
','starFul
l_5.jpg',1
)">
</map>
<input type="hidden" name="starRate" value="0">
<input type="submit" name="check" value="Rate it!">
</form>
</body>
</html>
*******************
Here is a link to rar with the images too, if needed:
http://www.latgolf.eu/soft/rating.rar*******************
As you can see, I have created a multu rollover image, that shows me the stars, that i want to click. Now I need a onClick option, then does two things:
1. It changes the orignial image (the gray stars) to a new image, width the stars i fave selected (ie, if i clicked 4 stars, then the original image should change from starEmpty_5.jpg to starFull_4.jpg.
2. Since, voting, i need to know, what i have selected, i need to change the hidden input field "starRate" value (forgot to put that in the archive :-( ) to a new number, that shows me the stars, i gave.
Any suggestions how to correctly do this?
