Søg
Avatar billede kometen79 Nybegynder
02. november 2005 - 16:46 Der er 13 kommentarer og
1 løsning

Knap med værdi - onclick

Hejsa Eksperter,

Hvordan laver jeg en knap som bliver markeret når man trykker på den (valg) og som indeholder en værdi i en formular.

Det kan være en knap med f.eks. være et icon som skal vise om man ønsker en tekst med fed eller kursiv, som man kender det fra diverse editorer.

Spørg endelig.
Avatar billede miss-g Seniormester
02. november 2005 - 18:35 #1
Skal knappen blive nede når den er valgt eller er det kun i det øjeblik man trykker på den?
Avatar billede johan.o Nybegynder
02. november 2005 - 23:18 #2
Kunne være noget ala :

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0//EN' 'http://www.w3.org/TR/REC-html40/strict.dtd'>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type='text/css'>

.but
{
cursor: pointer;
border: 1px solid #D4D0C8;
}

</style>
<script type='text/javascript'>

function fnBut(oAction,oObject)
{
if(oObject.className!="but_disabled")
  {
  if(oAction=="1" || oAction=="4")
  {
  oObject.style.borderTopColor="#FFFFFF";
  oObject.style.borderLeftColor="#FFFFFF";
  oObject.style.borderRightColor="#000000";
  oObject.style.borderBottomColor="#000000";

  oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_on.jpg";
  }
  if(oAction=="2")
  {
  oObject.style.borderColor="#D4D0C8";

  oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_on.jpg";
  }
  if(oAction=="3")
  {
  oObject.style.borderTopColor="#000000";
  oObject.style.borderLeftColor="#000000";
  oObject.style.borderRightColor="#FFFFFF";
  oObject.style.borderBottomColor="#FFFFFF";

  oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_act.jpg";
  }
  }
}

function fnBut1(oAction,oObject)
{
if(oObject.className=="but")
  {
  if(oAction=="1" && oObject.src.substr(oObject.src.lastIndexOf("_"))=="_on.jpg")
  {
  oObject.style.borderTopColor="#FFFFFF";
  oObject.style.borderLeftColor="#FFFFFF";
  oObject.style.borderRightColor="#000000";
  oObject.style.borderBottomColor="#000000";
  }

  if(oAction=="2" && oObject.src.substr(oObject.src.lastIndexOf("_"))=="_on.jpg")
  {
  oObject.style.borderColor="#D4D0C8";
  }

  if(oAction=="3")
  {
  if(oObject.src.substr(oObject.src.lastIndexOf("_"))=="_on.jpg")
    {
    oObject.style.borderTopColor="#000000";
    oObject.style.borderLeftColor="#000000";
    oObject.style.borderRightColor="#FFFFFF";
    oObject.style.borderBottomColor="#FFFFFF";

    oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_act.jpg";

    document.getElementById('vDel').value='on';
    }
  else
    {
    oObject.style.borderTopColor="#FFFFFF";
    oObject.style.borderLeftColor="#FFFFFF";
    oObject.style.borderRightColor="#000000";
    oObject.style.borderBottomColor="#000000";

    oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_on.jpg";

    document.getElementById('vDel').value='off';
    }
  }
  }
}

</script>
</head>

<body style='background-color: gray;'>

<form id='oForm' method='post' action='oLink.php' onsubmit="return false;">

<div style='position: relative; width: 100px; text-align: center; background-color: #D4D0C8;'>Knapper :<br>
<input type="image" class="but" src="but_del_on.jpg" name="Del" alt="Delete" onclick="act=this;" onmouseover="fnBut('1',this);" onmouseout="fnBut('2',this);" onmousedown="fnBut('3',this);" onmouseup="fnBut('4',this);">
<img class="but" src="but_del_on.jpg" id="Del" alt="Delete" onmouseover="fnBut1('1',this);" onmouseout="fnBut1('2',this);" onmousedown="fnBut1('3',this);">
<input type='hidden' id='vDel' value='off' name='hDel'>
</div>

</form>

</body>
</html>

Link til live version : http://twobarrel.dk/eksperten/test.htm

Mvh. Johan
Avatar billede johan.o Nybegynder
02. november 2005 - 23:25 #3
Knappen til venstre kan anvendes til at sende formen, i ovenstående er formen forhindret i at sende pga. onsubmit='return false;' Den anvender functionen fnBut(), i attributerne til <input> tag'et er en onclick event sat til 'act=this', dette er for at fortælle en evt. javascript validerings funktion hvilken knap der trikkede afsendelsen af formen.

Den anden knap er en ..... hvad skal jeg kalde den ? .... vælge knap, aktiveret eller ikke aktiveret. Når knappen trykkes ned sættes form feltet vDel til 'on' når den trykkes op igen sættes vDel til 'off'.

Princippet i begge knapper er styles på borders og ved aktivering vælges et andet billede hvor selve grafikken er rykket 1px til højre og 1px ned for at bidrage til illusionen af at knappen trykkes ned.

Mvh. Johan
Avatar billede kometen79 Nybegynder
03. november 2005 - 10:23 #4
Det er præcis det jeg mener, jeg tjekker det lige og vender tilbage
Avatar billede kometen79 Nybegynder
03. november 2005 - 15:09 #5
Det er super, og jeg har fået det til at virke, hvordan tilføjer jeg flere knapper med forskellige værdier?
Avatar billede johan.o Nybegynder
03. november 2005 - 16:16 #6
Der er to typer af knapper her. Den ene er en <input type='image'> som aktiverer afsendelsen af formen. Hvis du vil have flere af dem er følgende ændringer påkrævet :

1.: Et andet navn. F.eks. 'Save'.
2.: En anden img.src. Ellers ligner alle knapperne jo hinanden. Husk at navnet på disse billeder skal ende på '_on.jpg' og '_act.jpg' for at scriptet fungerer.
3.: alt attributen bør naturligvis også ændres til f.eks. 'Save'.

Den anden type knap, der bliver nede, skal du ændrer flg.:

1.: img.src. Skal ændres ligesom ovenstående.
2.: id attributen skal ændres til f.eks. Save.
3.: alt attributen skal ændres til f.eks. Save.
4.: du skal tilføje endnu et <input type='hidden'> felt, som skal have den samme id som du satte i pkt. 2 men med et 'v' foran. F.eks. 'vSave'

Det burde være nok - Prøv det og kom tilbage.

Mvh. Johan
Avatar billede johan.o Nybegynder
03. november 2005 - 16:17 #7
Ang. pkt.1 - et andet navn - altså name attributen.

Mvh. Johan
Avatar billede johan.o Nybegynder
03. november 2005 - 16:19 #8
Argh, jeg ser lige at der er brugt en absolut værdi i scriptet med knappen der bliver nede...øjeblik så kommer jeg tilbage.

Mvh. Johan
Avatar billede johan.o Nybegynder
03. november 2005 - 16:27 #9
I scriptet figurerer disse to linjer :

document.getElementById('vDel').value='on';
document.getElementById('vDel').value='off';

de skal ændres til :

document.getElementById('v'+oObject.id).value='on';
document.getElementById('v'+oObject.id).value='off';

Det burde fixe det lille problem.

Mvh. Johan
Avatar billede johan.o Nybegynder
03. november 2005 - 16:33 #10
Værd derudover opmærksom på at 'background-color: #D4D0C8;' er valgt til <div> boksen fordi det er den farve der er baggrund på knappernes billeder. Hvis du vil ændre denne farve skal du også ind og editere baggrundsfarven på knappernes billeder, ellers er det min erfaring at det godt kan se lidt mærkeligt ud.

Mvh. Johan
Avatar billede johan.o Nybegynder
06. november 2005 - 11:39 #11
Jeg har ændret en del i scriptet således at funktions kaldet bliver mere enkelt.

Se resultatet her : http://twobarrel.dk/eksperten/but_knapper.htm

Mvh. Johan
Avatar billede kometen79 Nybegynder
23. november 2005 - 23:05 #12
Tusind tak det virker jo. smid et svar
Avatar billede kometen79 Nybegynder
23. november 2005 - 23:05 #13
Det havde du allerede gjort :)
Avatar billede johan.o Nybegynder
24. november 2005 - 00:05 #14
Tak for points, godt du kunne bruge det :)

Mvh. Johan
Avatar billede 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.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 10:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
White papers
Flere white papers »