Button met achtergrondje...

[RickyHeijnen]

Ik wil mijn formulieren een leuke uitstraling geven door van de verzend-knop een mooie grafische knop te maken.

Nu heb ik een afbeelding waarbij de linker en rechter kant bestaat uit een ronding, maar het irritante is dat de lengte van de button afhankelijk is van de lengte van de tekst. Hij moet dus zeg maar de linkerkant en de rechterkant 1x laten zien en alles ertussen opvullen door een afbeelding te repeteren.

Heeft iemand een idee hoe ik dit het beste kan aanpakken? Ik heb zelf geen flauw idee...

[alienfruit]

DIVjes met javascript? (document.forms[0].submit() ?)

[RickyHeijnen]

Oowja... gewoon geen submit-knop gebruiken, maar een div/table als verzendknop en daar de images in planten.... Goed idee Ik ga het meteen proberen!

[equationunequal]

code:

<input id="submit" type="image" src="plaatje.ext" name="Submit" value="Submit" />

Zorg dat plaatje.ext alleen de afbeelding zonder hoeken is... Stop dat in een divje oid. en stel de hoeken als achtegrond daarvan in...

[ Voor 75% gewijzigd door equationunequal op 23-03-2005 19:57 ]

[crisp]

rheijnen schreef op woensdag 23 maart 2005 @ 18:53:
Oowja... gewoon geen submit-knop gebruiken, maar een div/table als verzendknop en daar de images in planten.... Goed idee Ik ga het meteen proberen!

* crisp mompelt iets over usability boven design...

[Barracuda_82]

crisp schreef op woensdag 23 maart 2005 @ 22:43:
[...]

* crisp mompelt iets over usability boven design...

Ik denk dat in bepaalde gevallen het veranderen van de buttons in een formulier zeker wel de usability kan bevorderen

Denk aan de toepassing van afbeeldingen voor buttons om deze extra op te laten vallen bijvoorbeeld. Of om veelvoorkomende elementen in een site terug te laten komen in de buttons.

Maar ik moet toegeven dat ik vermoed dat de TS niet zoiets nobels in gedachten heeft.

[crisp]

Barracuda_82 schreef op woensdag 23 maart 2005 @ 23:02:
[...]


Ik denk dat in bepaalde gevallen het veranderen van de buttons in een formulier zeker wel de usability kan bevorderen

Denk aan de toepassing van afbeeldingen voor buttons om deze extra op te laten vallen bijvoorbeeld. Of om veelvoorkomende elementen in een site terug te laten komen in de buttons.

Maar ik moet toegeven dat ik vermoed dat de TS niet zoiets nobels in gedachten heeft.

Daar is de input type="image" wel geschikt voor. Daarnaast laten de meeste browsers het stylen met een background-image ook al goed toe (hoewel er wel wat kleine issues zijn hier en daar) - een voorbeeldje is de submitbutton naast de quicksearch hier bovenin.
Echter om meteen de standaard form-functionaliteit helemaal te laten varen en enkel een JS-only oplossing neer te zetten is iets waar je zeker goed over na moet denken

[Barracuda_82]

Ik denk dat het met HTML/CSS-only ook wel op te lossen is, dus zo erg zal het dan niet van JS afhangen. Het word dan welliswaar wat moeilijker om het cross-browser te maken, maar als dit "eenvoudig" te doen is en de usability van de pagina verbeterd, dan zie ik geen problemen.