Tilrette rate script
Jeg har nedenstående kode, hvor det som standard er radio buttons man bruger til at vælge rate.Jeg vil i stedet, at man klikker på selve billederne, og der vælger en rate valg.
Jeg har forsøgt at nappe værdierne fra radio buttons og indsætte på min div rundt om billede værdierne..
Men da scriptet tager value og name fra radio buttons skal det rettes til.
nogen der kna hjælpe her?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script type="text/javascript">
var f = Array;
function setGauge(bar, val) {
if(!f[bar]) {
for(i=1;i<=5-val;i++){
document.getElementById("b"+bar+i).style.visibility='hidden';
}
}
}
function setIt(bar, val) {
for(i=1;i<=5;i++){
document.getElementById("b"+bar+i).style.visibility='visible';
}
f[bar] = false;
setGauge(bar,val);
f[bar] = true;
}
function resetGauge(bar) {
if(!f[bar]) {
for(i=1;i<=5;i++){
document.getElementById("b"+bar+i).style.visibility='visible';
}
}
}
function getDim(el){
var rd = {x:el.offsetLeft,y:el.offsetTop}, tEl=el.offsetParent;
while (tEl){
rd.x += tEl.offsetLeft;
rd.y += tEl.offsetTop;
tEl = tEl.offsetParent;
}
return rd;
}
function doSprechblase(k){
if(k == 1) document.getElementById("sprechtext").innerHTML = 'Hier sollten die Informationen, der Unterhaltungswert, die Aktualität und die Nützlichkeit dieser Seite bewertet werden';
if(k == 2) document.getElementById("sprechtext").innerHTML = 'Bewerten Sie hier das Design, die Anordnung der Elemente und die Übersichtlichkeit der Navigationsmöglichkeiten der Seite';
if(k == 3) document.getElementById("sprechtext").innerHTML = 'Bewerten Sie diese Seite in Bezug auf die Möglichkeit, interaktive Elemente (Suchboxen, Rechner, Foren u.ä.) zu nutzen';
if(k == 4) document.getElementById("sprechtext").innerHTML = 'Wie bewerten Sie die subjektive Dauer, bis die Seite vollständig geladen wurde';
fElm = document.getElementById("header");
var pos = getDim(fElm);
document.getElementById("sprechblase").style.top=pos.y+8+'px';
document.getElementById("sprechblase").style.left=pos.x-15+(k*70)+'px';
document.getElementById("sprechblase").style.display='';
}
function hideSprechblase() {
document.getElementById("sprechblase").style.display='none';
}
</script>
</head>
<body>
<div onmouseover="setGauge(1,5)" onmouseout="resetGauge(1)"><input onclick="setIt(1,5)" type="radio" name="r11" value="5" /></div>
<div onmouseover="setGauge(1,4)" onmouseout="resetGauge(1)"><input onclick="setIt(1,4)" type="radio" name="r11" value="4" /></div>
<div onmouseover="setGauge(1,3)" onmouseout="resetGauge(1)"><input onclick="setIt(1,3)" type="radio" name="r11" value="3" /></div>
<div onmouseover="setGauge(1,2)" onmouseout="resetGauge(1)"><input onclick="setIt(1,2)" type="radio" name="r11" value="2" /></div>
<div onmouseover="setGauge(1,1)" onmouseout="resetGauge(1)"><input onclick="setIt(1,1)" type="radio" name="r11" value="1" /></div>
<div style="float:left;width:104px;height:26px;background-image:url('bar_bg.gif');overflow:hidden">
<div id="b15" style="float:left;" onmouseover="setGauge(1,1)" onmouseout="resetGauge(1)" onclick="setIt(1,1)" name="r11" value="1"><img src="bar_5.gif" alt="" border="0" /></div>
<div id="b14" style="float:left;" onmouseover="setGauge(1,2)" onmouseout="resetGauge(1)" onclick="setIt(1,2)" name="r11" value="2"><img src="bar_4.gif" alt="" border="0" /></div>
<div id="b13" style="float:left;" onmouseover="setGauge(1,3)" onmouseout="resetGauge(1)" onclick="setIt(1,3)" name="r11" value="3"><img src="bar_3.gif" alt="" border="0" /></div>
<div id="b12" style="float:left;" onmouseover="setGauge(1,4)" onmouseout="resetGauge(1)" onclick="setIt(1,4)" name="r11" value="4"><img src="bar_2.gif" alt="" border="0" /></div>
<div id="b11" style="float:left;" onmouseover="setGauge(1,5)" onmouseout="resetGauge(1)" onclick="setIt(1,5)" name="r11" value="5"><img src="bar_1.gif" alt="" border="0" /></div>
</div>
</body>
</html>
