All,
Here is some JavaScript I found. It creates a small scrollbar, which allows a user to scroll though a series of 5 images. The images represent votes, and the user can then press a "Rate us" button in order to cast a vote. As you can see in the code, followed by the images loading section, the default image/rating is set at 5. I would like to dynamically change this with a value stored in MySQL by passing the variable via PHP. I would again like to pass the new variable (the image/rating the user chose before selecting the submit button) to MySQL via PHP again. I'm not sure if this is even possible, but I thought I'd ask. I don't know JavaScript, so I'm sorry if this a noob question, cause I am. I do know PHP and MySQL though.
I'm open to other options as well. But I really like the idea of a small scrollbar and the ability to scroll through a series of images and cast a vote based on the image chosen. Could this be done in Flash? If JavaScripts work, I'd rather use that, cause I've got all the code right in front of me. :) .... and now you.
Here is the code. I've also zipped and attached a working version. Just unzip the folder and htm file, and run the index.htm file.
Thanks!!!
var set_action = "";
var set_path = "images/";
var set_id="<!--%ID%-->";
var set_spacer = "spacer.gif";
var set_scroll = "f0.gif";
var set_thumb = "f1.gif";
var set_rate1 = "1.gif";
var set_rate2 = "25.gif";
var set_rate3 = "5.gif";
var set_rate4 = "75.gif";
var set_rate5 = "10.gif";
var set_mark1 = "1";
var set_mark2 = "2";
var set_mark3 = "3";
var set_mark4 = "4";
var set_mark5 = "5";
var set_text = "";
var set_submit = "Rate us";
//SETTINGS END
var gotkl = 0;
var path = set_path;
var index = 0;
var firstTime = true;
var img_f = new Array();
img_f[0] = new Image();
img_f[1] = new Image();
img_f[0].src= path + set_scroll;
img_f[1].src= path + set_thumb;
//Files with images
var img_p = new Array();
img_p[1] = new Image();
img_p[2] = new Image();
img_p[3] = new Image();
img_p[4] = new Image();
img_p[5] = new Image();
set_spacer =path + set_spacer;
img_p[1].src=path + set_rate1
img_p[2].src=path + set_rate2
img_p[3].src=path + set_rate3
img_p[4].src=path + set_rate4
img_p[5].src=path + set_rate5
function imgonload()
{
// I need to be able to set this value dynamically. Currently it is statically set to 5.
document.id_pn.src = img_p[5].src;
}
flg = (document.all) ? 0 : 1;
var obj;
var dx,dy;
var flag = false;
function mousedown(ev)
{
if (flg)
{
X=ev.clientX;
Y=ev.clientY;
return false;
}
else
{
X=event.clientX;
Y=event.clientY;
}
}
function mousemove(ev)
{
if (flag)
{
if (flg)
{
X2=ev.clientX;
Y2=ev.clientY;
}
else
{
X2=event.clientX;
Y2=event.clientY;
}
dy=Y2-Y;
var dh=document.id_spacer.height+dy;
if (dh>-1 && document.id_spacer.height+dy<document.id_pn.height-7) {
document.id_spacer.height = document.id_spacer.height+(Y2-Y);
Y=Y2;
};
if (dh<=-1)
{
document.id_spacer.height=1;
}
if (dh>=document.id_pn.height-7)
{
document.id_spacer.height=document.id_pn.height-8;
}
var mark=Math.floor(document.id_spacer.height/(document.id_pn.height/5));
//alert(mark);
mark=5-mark;
document.id_pn.src = img_p[mark].src
document.post_form.rate.value=mark;
//window.status=mark;
return false;
}
}
function mouseup()
{
obj = null;
flag = false;
}
if (flg)
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
document.write(""+
"<table border='0' cellspacing='0' cellpadding='0' width='100px'>"+
" <tr>"+
" <td align='center'>"+
" <img align='middle' name='id_pn'>"+
" </td>"+
" <td id='scroll_cell' align='center' valign='top' width='20' background='"+img_f[0].src+"'>"+
"<table border=0 cellspacing='0' cellpadding='0'><tr><td><img border=0 name='id_spacer' width='20' height='0' src='"+set_spacer+"'></td></tr><tr><td><img width='20' height='8' border='0' id='id_pil' src='"+img_f[1].src+" 'style='cursor : hand;' onMouseDown='flag = true;' ></td></table>"+
" </td>"+
" </tr>"+
"<form action='"+set_action+"' method='post' name='post_form'>"+
" <tr>"+
" <td colspan='2' style='padding: 2px' align='left'>"+
" <input style='width:80%' type='submit' value='"+set_submit+"'>"+
" <input type='hidden' name='ID' value='"+set_id+"'><input type='hidden' name='rate' value='5'>"+
" </td>"+
" </tr></form></table>");
imgonload();
//-->")));