Avatar billede nemlig Professor
10. november 2009 - 09:31 Der er 5 kommentarer og
1 løsning

Tekst på knap med img-baggrund

Hejsa.
Jeg har et system, hvor der er en del knapper, som jeg har designet i Photoshop. Knapperne er ens, og eneste forskel er den tekst, der står på knappen, fx "Fortsæt".

Er det muligt at lave en knap med <img> uden tekst, og så skrive en tekst på knappen med html/css. Så kan jeg nemlig nøjes med én grafik-fil, og hvis jeg fx. vil ændre skrifttypen, vil det være meget enkelt.

Lige nu definerer jeg knappen således:

<button name="mySubmit" value="1" type="submit" style="border: none; cursor:hand;"><img src="knap_fortsaet.png" alt="Fortsæt til næste trin" /></button>
Avatar billede bqnke Nybegynder
10. november 2009 - 11:31 #1
Jeg ville sætte den i en form for så virker knappen i hvertfald:)



<form action="linktilsideher.html">
<button name="mySubmit" value="1" type="submit" style="border: none; cursor:hand;"><img src="knap_fortsaet.png" alt="Fortsæt til næste trin" /></button>
</form>

denne løsning virker :)
er det sådan du vil have det ?
Avatar billede bqnke Nybegynder
10. november 2009 - 11:53 #2
lægger lige et svar hvis det er sådan du ville have det..
Avatar billede mbm2016 Nybegynder
10. november 2009 - 13:11 #3
Hvad med at lave en knap og sætte baggrundsbilledet til din knap grafik?

<input type="button" style="background-image:url('DIT BAGGRUNDS BILLEDE HER');border:0px solid black;" value="Variabel tekst på grafik">
Avatar billede nemlig Professor
10. november 2009 - 14:59 #4
bqnke: Du svarer på noget helt andet end mit spørgsmål. Beklager hvis jeg ikke har fomuleret mig tydeligt nok.
Spørgsmålet handler om en anden løsning at designe knapper på.
Lige nu designer jeg hver knap i Photoshop incl. den tekst, som skal stå på knappen.
Jeg søger en løsning, hvor jeg kun gør brug af ét grafikdesign uden tekst, og teksten på knappen defineres via html/css.

mbm2007: Du er inde på det rigtige. Jeg kan først teste i aften..
Jeg bruger også knapper udenfor <form> ved hjælp af <a href...>
Kan jeg anvende "style" på samme måde, som foreslået ovenfor.
Avatar billede nemlig Professor
10. november 2009 - 21:36 #5
mbm2007: Nu har jeg prøvet dit forslag. Princippet er sådan set OK, men som jeg ser det, virker det ikke med <a href...>
Desuden bliver grafikken gentaget ud til højre, og bunden bliver skåret af grafikken.

Jeg rejser spørgsmålet med <a href...> i et ny spørgsmål.
Avatar billede nemlig Professor
01. december 2009 - 22:32 #6
Jeg har det til at virke med inspiration fra mbm2007. Send venligst et svar.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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