Notifikationer

Markér alle som læst Log ud

mtrolle Nybegynder

05. oktober 2004 - 03:14 Der er 9 kommentarer og
1 løsning

Stjerner til anmeldelse

Hejsa!

Jeg sidder med et anmeldelses system i PHP, hvor brugere kan anmelde film i 4 forskellige kategorier med værdien 1-5.
Indtil videre har jeg brugt input felter til angivelse af stjerner.
Ser således ud for hver kategori:
1 <input value="1" name="karakter_skue" type="radio" />
2 <input value="2" name="karakter_skue" type="radio" />
3 <input value="3" name="karakter_skue" type="radio" />
4 <input value="4" name="karakter_skue" type="radio" />
5 <input value="5" name="karakter_skue" type="radio" />

Nu har jeg fået min designer til at lave 2 filer til mig. En med en fuld stjerne og en svag stjerne.
Nu kunne jeg godt tænke mig, at i stedet for at bruge input felter som her, at bruge mine stjerne, så man kan trykke på fx 3. stjerne og så vil de 3 første være den fulde stjerne og de to sidste være svage stjerner. (og smide en værdi mellem 1 og 5 til et hidden input felt eller lign. således jeg i alt fald kan få det sendt med i formen!

Mit problem er at mine kundskabe i javascript er _meget_ små...
Nogle der kan hjælpe mig??? :)

Synes godt om

roenving Novice

05. oktober 2004 - 09:01 #1

Sådan ?-)

<form name="anmeld">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne1" style="width:20px;height:20px;background:red;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne2" style="width:20px;height:20px;background:red;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne3" style="width:20px;height:20px;background:red;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne4" style="width:20px;height:20px;background:red;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne5" style="width:20px;height:20px;background:red;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;">
<input type="hidden" name="stjerner">
</form>

<script type="text/javascript">
function stjerne(elm){
var num = +elm.name.match(/\d$/)[0],bil;
document.anmeld.stjerner.value = num;
for(i=1;6>i;i++){
bil = document.images['stjerne'+i];
if(num>=i){
bil.src = 'stjerne_stark.gif';
bil.style.MozOpacity = 0.99;
bil.style.opacity = 1.0;
if(bil.filters)bil.filters.alpha.opacity = 100;
}else{
bil.src = 'stjerne_svag.gif';
bil.style.MozOpacity = 0.5;
bil.style.opacity = 0.5;
if(bil.filters)bil.filters.alpha.opacity = 50;
}
}
}
</script>

-- her har jeg så også brugt opacity til at gøre det, men det kan selvfølgelig fjernes, når du nu har de rigtige stjerner (det er lavet, så du kan overbevise dig om, at det virker uden at indsætte de rigtige billed-navne -- eller lave det med kun een stjerne !-)

-- med de tre opacity-properties vil det virke i langt de fleste nutidige browsere, filter er IE-only-propertyen, -moz-opacity er til Gecko-browserne og opacity er CSS3-propertyen, som i hvert fald understøttes af bl.a. Safari !o]

Synes godt om

mtrolle Nybegynder

05. oktober 2004 - 13:06 #2

Dvs. jeg kan korte hele scriptet ned til dette:
<form name="anmeld">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne1">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne2">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne3">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne4">
<img src="stjerne_svag.gif" onclick="stjerne(this);" name="stjerne5">
<input type="hidden" name="stjerner">
</form>

<script type="text/javascript">
function stjerne(elm){
var num = +elm.name.match(/\d$/)[0],bil;
document.anmeld.stjerner.value = num;
for(i=1;6>i;i++){
bil = document.images['stjerne'+i];
if(num>=i){
bil.src = 'stjerne_stark.gif';
}else{
bil.src = 'stjerne_svag.gif';
}
}
}
</script>

og det vil virke lige så godt :)
Plus det nok også vil dække langt flere browsere...

Synes godt om

mtrolle Nybegynder

05. oktober 2004 - 13:06 #3

og smid forresten et svar også ;)

Synes godt om

roenving Novice

05. oktober 2004 - 13:08 #4

Det burde det !-)

-- velbekomme '-)

Synes godt om

mtrolle Nybegynder

05. oktober 2004 - 13:09 #5

Det gør det i alt fald i safari :)

Synes godt om

roenving Novice

05. oktober 2004 - 13:12 #6

Muy bueno,

-- og tak for point ;~}

Synes godt om

mtrolle Nybegynder

05. oktober 2004 - 13:24 #7

En lille hurtig: kan jeg ikke tilføje en variabel, således at jeg kan bruge samme script til alle de 4 karaktere jeg skal bruge? Havde prøvet således:
<img src="/imgs/stjerne_ubrugt.jpg" onclick="stjerne(this,'skue');" name="stjerne_skue5" /> // for alle stjernerne
<input type="hidden" name="karakter_skue"> //i dette tilfælde kalder vi karakter typen for skue
</form>

<script type="text/javascript">
function stjerne(elm,named){ //jeg har så lavet endnu en variabel kaldet named, men hvordan kalder jeg den korrekt?
var num = +elm.name.match(/\d$/)[0],bil;
document.anmeld.karakter_named.value = num; // dette virker i alt fald ikke...
for(i=1;6>i;i++){
bil = document.images['stjerne_'.named+i]; //det gør dette heller ikke :(
if(num>=i){
bil.src = '/imgs/stjerne_fuld.jpg';
}else{
bil.src = '/imgs/stjerne_ubrugt.jpg';
}
}
}
</script>

Har du lige en kvik løsning på en sådan en?

Synes godt om

roenving Novice

05. oktober 2004 - 14:56 #8

F.eks.

<form name="anmeld1">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld1');" name="stjerne1_1">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld1');" name="stjerne1_2">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld1');" name="stjerne1_3">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld1');" name="stjerne1_4">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld1');" name="stjerne1_5">
<input type="hidden" name="stjerner1">
</form>

<form name="anmeld2">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld2');" name="stjerne2_1">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld2');" name="stjerne2_2">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld2');" name="stjerne2_3">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld2');" name="stjerne2_4">
<img src="stjerne_svag.gif" onclick="stjerne(this,'anmeld2');" name="stjerne2_5">
<input type="hidden" name="stjerner2">
</form>

<script type="text/javascript">
function stjerne(elm,f){
var num = +elm.name.match(/\d$/)[0],bil;
var fnum = f.match(/\d$/)[0];
f = document.forms[f];
f.elements['stjerner'+fnum].value = num;
for(i=1;6>i;i++){
bil = document.images['stjerne'+fnum+"_"+i];
if(num>=i){
bil.src = 'stjerne_stark.gif';
}else{
bil.src = 'stjerne_svag.gif';
}
}
}
</script>

Synes godt om

mtrolle Nybegynder

05. oktober 2004 - 14:59 #9

Jeg har så bare kaldt dem
karakter_skue
karakter_hand
karakter_effekt
karakter_ialt
Og det hele er i en form!

Synes godt om

roenving Novice

05. oktober 2004 - 15:08 #10

<form name="anmeld">
<img src="stjerne_svag.gif" onclick="stjerne(this,'skue');" name="stjerne_skue_1">
<img src="stjerne_svag.gif" onclick="stjerne(this,'skue');" name="stjerne_skue_2">
<img src="stjerne_svag.gif" onclick="stjerne(this,'skue');" name="stjerne_skue_3">
<img src="stjerne_svag.gif" onclick="stjerne(this,'skue');" name="stjerne_skue_4">
<img src="stjerne_svag.gif" onclick="stjerne(this,'skue');" name="stjerne_skue_5">
<input type="hidden" name="karakter_skue">

<img src="stjerne_svag.gif" onclick="stjerne(this,'hand');" name="stjerne_hand_1">
<img src="stjerne_svag.gif" onclick="stjerne(this,'hand');" name="stjerne_hand_2">
<img src="stjerne_svag.gif" onclick="stjerne(this,'hand');" name="stjerne_hand_3">
<img src="stjerne_svag.gif" onclick="stjerne(this,'hand');" name="stjerne_hand_4">
<img src="stjerne_svag.gif" onclick="stjerne(this,'hand');" name="stjerne_hand_5">
<input type="hidden" name="karakter_hand">

osv ...

</form>

<script type="text/javascript">
function stjerne(elm,f){
var num = +elm.name.match(/\d$/)[0],bil;
document.anmeld.elements['karakter_'+f].value = num;
for(i=1;6>i;i++){
bil = document.images['stjerne_'+f+"_"+i];
if(num>=i){
bil.src = 'stjerne_stark.gif';
}else{
bil.src = 'stjerne_svag.gif';
}
}
}
</script>

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS