Hvordan laver man sine egne designede knapper

Laver bare et billede af den knap du vel have og skriver:
<input type="submit" name="XXX" value="Login" style="background-image:url(din url);">

:)

Okay. Hvordan gør man så at den skifter mellem 2 billeder? Normalt hvis man har en menuknap (ikke billede men af tekst) kan man benytte:

.XXX:link {font-weight: color: #666666; text-decoration: none}
.XXX:visited {font-weight: color: #666666; text-decoration: none}
.XXX:hover {font-weight: color: #000000; text-decoration: none}

Til at gøre så ens knap ændre farve når musen går hen over den. og tilbage igen når musen ikke længere er over knapper. Kan man også gøre dette med et billede?

onmouseover="this.style.backgroundImage='url(dit 2. billede)';"
onmouseout="this.style.backgroundImage='url(dit 1. billede)';"

Ja okay. Var faktisk også den jeg selv tænkte på. Men har førhen oplevet at når man flyttede musen hen over billede, så skulle browseren lige download billede først. Hvilke ødelagde det lidt. Kan man gøre så browseren henter billede med det samme når den kommer ind på login siden?

Samt kender du en god måde / program til at lave og designe en sådan knap / billede? så kvaliteten bliver i top. Ville gerne have min knap til at vise et &#8730; - i midten af knappen. Men bruger jeg photoshop til det, er det som om at det ikke bliver skapt. pga. den lille størrelse på billede.

&#8730; = et "ok" tegn / hakketegn.

Kan denne tutorial være dig til hjælp - ang. design af knap ?
http://www.comigang.dk/photoshop/plastik-knap/

Uha, ja det var lige hvad jeg søgte efter. Det gjorde jo knapper meget mere "ægte". Perfekt. Takker her fra. Lav lige 2 svar. :o)

supersquirrel:

Kan ikke rigtig få det til at virke ved at skrive din kode:

<input type="submit" name="XXX" value="Login" style="background-image:url(din url);">

der sker nemlig ingen ting ved det?

Og hvad skal man præcis skrive hvis man ønsker at indsætte det der "onmouseover/onmouseout".

Har siddet det meste af dagen og designet min knap, og den er blevet præcis som jeg vil have den. Nu mangler jeg bare den del med koden, før det virker helt.

Svar herfra ...sig hvis det ikke 'funker'!

<ole>

Lav evt. tre billeder efter fotografs tut: 'knap_out.gif', 'knap_over.gif', 'knap_down.gif'.

<script type="text/JavaScript">
function changeBtn(oBtn, sAction) {
    var sSrc = oBtn.getAttribute("src");
    oBtn.setAttribute("src", sSrc.replace(/_(out|over|down|out).gif/, "_"+sAction+".gif"));
}
</script>

<input src="knap_out.gif" type="image"
    onmouseover="changeBtn(this, 'over')"
    onmousedown="changeBtn(this, 'down')"
    onmouseup="changeBtn(this, 'out')"
    onmouseout="changeBtn(this, 'out')">

Så undgår man at bruge JavaScript til at submitte formen med (og dermed disable onsubmit-event'en) - og samtidig virker styling af formfelter (herunder knapper) ikke crossbrowser  :)

/mvh
</bole>

For lige af afslutte tråden ordenligt. Så blev problemet løst på denne måde:

<input type="image" name="XXX" src="billeder/knap/loginout.jpg" onmouseover="this.src='billeder/knap/loginover.jpg'" onmouseout="this.src='billeder/knap/loginout.jpg'"/>
</form>

Og det virkede præcis som det skulle. Hvis man blot kigget væk fra at der ikke er nogen submit knap længere. (Brugte submit knapper til at ckekke om den pågældende person kom fra index.php f.eks.) Det kan jeg ikke gøre længere, da der ingen submit knap er. Men sådan er det jo. Problemet er i hvert fald løst :o)

I skal have tak for hjælpen..!!

Forsat god weekend!

Den knap, du lige har vist - og den jeg viste - er netop en submitknap  ;o)

Hvis du mener, at du på serveren tjekkede på knappens navn, kan du i realiteten stadig gøre det - men navnet fungerer på en lidt anden måde ved brug af type="image" knapper.

Brug i stedet et skjult felt at teste på:

<form ...................>
    <input type="hidden" name="contxt" value="noget">
    ... ... ... ...
    ... ... ... ...
    <input type="image" src="bla.gif" .....>
</form>

Så kan du teste på variablen 'contxt' og finde ud af, hvilken form/side brugeren kommer fra  ;o)

Arh ja okay. Sådan viste jeg ikke at man kunne gøre det. Smart - og tak.

Men den kan vel hedde alt muligt ikke? den behøver vel ikke hedde contxt?

Du må kalde den "Herberth_Leopold_Maximillian_Von_Der_Schwandvogel_III", hvis du føler for det ... bare du overholder reglerne for stavning af variabler (undgå mellemrum og specialtegn)  ;o)

hehe :D ja okay.. fair nok. Det tror jeg så at jeg vil klade den :D skide godt navn.. og SLET ikke særlig besværligt..

Men laver du ikke også et svar :)

- Forsat god weekend!

Tak i lige måde ... og du kunne jo også bare kalde den 'Ib'  ;D

Okay :D Så mangler supersquirrel bare lige og lave et svar..

Prøv i øvrigt lige at tjekke, hvorfor du ikke kan finde navnet på en type="image":

<?php
var_dump($_POST);
?>

<form action="<?=$_SERVER["PHP_SELF"]?>" method="post">
    <input type="image" name="knap" src="bla.gif">
</form>

Hint: x og y er klikkoordinaterne  ;o)

Tak for points  ;o)

Så lidt..

ps. forstod ikke det der hint :D men nu har jeg fået løst problemet..! såå