Form buttom image in CSS?

[Verwijderd]

Hi All,

Ik zou graag de standaard form buttons zoals RESET en SUBMIT willen vervangen door images.
Ik weet dat ik dit direct in het form kan doem maar eigenlijk zou ik dit graag in de CSS file willen doen.

Iemand die ik ooit op MSN sprak schreef dat het mogelijk was maar wist niet precies hoe. Ook googlen gaf geen resultaat.

Wie kan mij helpen?

Tnx

[BasieP]

[google=javascript form submit] geeft anders aardig wat resultaten
volgens mij kom je er wel uit daarmee.

[ Voor 25% gewijzigd door BasieP op 31-01-2006 21:45 ]

[cyberstalker]

Ik zou eens rondkijken naar de background-image property.

BasieP schreef op dinsdag 31 januari 2006 @ 21:45:
[google=javascript form submit] geeft anders aardig wat resultaten

Ik snap niet helemaal wat dat met CSS te maken heeft.

[ Voor 68% gewijzigd door cyberstalker op 31-01-2006 21:46 ]

[BasieP]

cyberstalker schreef op dinsdag 31 januari 2006 @ 21:45:
Ik zou eens rondkijken naar de background-image property.

[...]

Ik snap niet helemaal wat dat met CSS te maken heeft.

je kunt geen form submitten met alleen CSS..
dus je zult JS moeten gebruiken.

de TS vroeg, en ik geef antwoord..
denk dat we zijn vraag allebij anders begrijpen

[Victor]

BasieP schreef op dinsdag 31 januari 2006 @ 21:48:
[...]


je kunt geen form submitten met alleen CSS..
dus je zult JS moeten gebruiken.

de TS vroeg, en ik geef antwoord..
denk dat we zijn vraag allebij anders begrijpen

Je kunt de submit en reset knop toch stijlen met CSS, en dat is wat de TS wil.

@TS: Met CSS de borders van de knop weghalen en de background instellen op het plaatje van je keuze. Eventueel nog een width en height meegeven om de knop de grootte van het plaatje te geven.

[Verwijderd]

BasieP schreef op dinsdag 31 januari 2006 @ 21:48:
[...]


je kunt geen form submitten met alleen CSS..
dus je zult JS moeten gebruiken.

Volgens mij kun je voortaan beter goed lezen.
Hij bedoelt namelijk dat hij de submit / reset buttons een background image wilt geven, dus niet via CSS submitten maar gewoon het uiterlijk van de buttons dmv CSS veranderen.

[TheBorg]

Ook javascript is niet nodig:

code:

<input name="submit" type="image" value="something" src="image.gif" style="border:none;height:666px;width:666px;">

[Verwijderd]

TheBorg schreef op dinsdag 31 januari 2006 @ 21:52:
Ook javascript is niet nodig:

code:

<input name="submit" type="image" value="something" src="image.gif" style="border:none;height:666px;width:666px;">

Behalve dan dat zijn vraag is hoe hij de image in CSS kan opgeven. Ligt het aan mij of lezen jullie een simpele vraag gewoon verkeerd?

[cyberstalker]

BasieP schreef op dinsdag 31 januari 2006 @ 21:48:
[...]


je kunt geen form submitten met alleen CSS..
dus je zult JS moeten gebruiken.

Je kunt ook geen webpagina's maken met alleen CSS.

Als je écht mooi gestylede submit-knoppen wilt, kan dan heel simpel. Maak een normale submit-knop, en zorg dat deze buiten beeld zit (visibility: hidden; werkt misschien ook, maar heb ik niet getest), en een id attribute heeft.

Vervolgens maak je een mooie submit-knop, met een plaatje, link, span of whatever je wilt, en zet er een <label for="idvanechtesubmitknop"> omheen.

Geen javascript is noodzakelijk.

Edit: en bij je gekozen object kun je dan uiteraard het gewenste plaatje in de CSS kiezen. background-image o.i.d.

[ Voor 11% gewijzigd door cyberstalker op 31-01-2006 21:56 ]

[BasieP]

Verwijderd schreef op dinsdag 31 januari 2006 @ 21:52:
[...]

Volgens mij kun je voortaan beter goed lezen.

welja joh direct offencief opstellen zo maak je vrienden

Modbreak:

Op deze manier maak je ook geen vrienden met mij, stop dat dan in een TR

[ Voor 17% gewijzigd door BtM909 op 31-01-2006 23:37 ]

[TheBorg]

code:

.button {
    background  : transparent;
    width        : 666px;
    height      : 666px;
    border      : 0px;
}
.button img {
    position      : relative;
    top        : -5px;
    left          : -1px;
}

Maar werkt waarschijnlijk niet in alle brouwsers.

[ Voor 4% gewijzigd door TheBorg op 31-01-2006 22:02 ]

[Verwijderd]

BasieP schreef op dinsdag 31 januari 2006 @ 22:00:
[...]

welja joh direct offencief opstellen zo maak je vrienden

Nou offensief is lichtelijk overdreven, zeker met een smiley erna.
Maar je bent niet de enige die verkeerd leest, terwijl de TS toch niet onduidelijk is IMO. Verder no hard feelings.

[Victor]

cyberstalker schreef op dinsdag 31 januari 2006 @ 21:56:
[...]

Je kunt ook geen webpagina's maken met alleen CSS.

Als je écht mooi gestylede submit-knoppen wilt, kan dan heel simpel. Maak een normale submit-knop, en zorg dat deze buiten beeld zit (visibility: hidden; werkt misschien ook, maar heb ik niet getest), en een id attribute heeft.

Vervolgens maak je een mooie submit-knop, met een plaatje, link, span of whatever je wilt, en zet er een <label for="idvanechtesubmitknop"> omheen.

Geen javascript is noodzakelijk.

Edit: en bij je gekozen object kun je dan uiteraard het gewenste plaatje in de CSS kiezen. background-image o.i.d.

Waarom zo gruwelijk omslachtig, wat bereik je hier meer mee dan met het opmaken van de knop zelf?

[Verwijderd]

Omdat het hele idee van CSS is, dat opmaak van content gescheiden blijft. Principieel lijkt me.

[BasieP]

Verwijderd schreef op dinsdag 31 januari 2006 @ 22:24:
Omdat het hele idee van CSS is, dat opmaak van content gescheiden blijft. Principieel lijkt me.

dus gaan we knoppen buiten beeld gooien?
lijkt me niet helemaal de bedoeling..

vooral screenreaders houden daarvan

[ Voor 7% gewijzigd door BasieP op 31-01-2006 23:00 ]

[Victor]

Verwijderd schreef op dinsdag 31 januari 2006 @ 22:24:
Omdat het hele idee van CSS is, dat opmaak van content gescheiden blijft. Principieel lijkt me.

Dat doe je dus niet door extra elementen toe te voegen, en bestaande elementen (die de functie die je wilt hebben al vervullen) te verstoppen op allerlei smerige manieren.

De enige semantisch juiste oplossing hier is het opmaken van de knop zelf.

[ZeilDude]

Ik heb dit draadje hoofdschuddend zitten lezen en exotische oplossingen voorbij zien komen. Ok, eerst even de vraag van TS beantwoorden: een knop die als image getoond wordt en met css wordt gestyled. Mijn oplossing:

HTML:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>lelijke css-knop test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        input.submit {
            background-image: url(knopSubmit.gif);
            width: 150px;
            height: 30px;
        }
    </style>
</head>

<body>
    <form action="#">
        <input class="submit" type="image" alt="submit" 
            src="knopTransparant.gif" name="submit" value="submit" />
    </form>
</body>

</html>

Deze code kun je ook even online bekijken. Wat je dus doet is gewoon een image button maken zoals TheBorg eerder suggereerde, maar deze afbeelding transparant houden. Vervolgens style je er een achtergrond achter en geef je de knop vaste waarden. Easy as 1-2-3, of heb ik nu toch iets over het hoofd gezien?

Je hebt op deze manier geen javascripts nodig en al helemaal geen ranzige oplossingen om de knop te verbergen. Ook in alternatieve browsers als Lynx blijft de site gewoon begrijpelijk. Voordeel is dat je de styling inderdaad helemaal aan je css kunt overlaten, en je html zo clean mogelijk (afgezien van de transparante gif ).

Overigens ben ik zelf geen groot voorstander van image-buttons. Standaard buttons vind ik veel duidelijker, en die duidelijkheid vind ik vóór de vormgeving gaan. Toch snap ik dat er soms wel een behoefte aan is. Den wel even aan een goede alt-tekst om je formulier begrijpelijk te houden voor non-css browsers.

[ Voor 31% gewijzigd door ZeilDude op 01-02-2006 01:57 ]

[Verwijderd]

@BasieP & King_Louie
Waar halen jullie vandaan dat ik de knoppen-buiten-beeld-manier voorstel of goedkeur? Cyberstalker zei dat, ik niet. Er wordt écht slecht gelezen in dit topic.

Mijn reactie, dat de hele opzet van CSS was om opmaak en content te scheiden, doelt op het principiële karakter dat de topicstarter waarschijnlijk heeft om het met CSS te willen doen. Als het niet met CSS kán, is dat jammer, maar daarom stelt hij hier ook de vraag. En voor de goede orde, knoppen buiten beeld verplaatsen lijkt mij ook niet de juiste methode, dat is smerig IE-achtig gehack. De knop zelf moet je opmaken, en of dat met CSS kan zou ik niet weten (background-image werkt kennelijk niet), maar ik zou het zelf het liefst met CSS doen en zou het jammer vinden als het niet met CSS kan, waarna ik het noodgedwongen in de HTML zelf zou doen, zonder knoppen buiten beeld te plaatsen.

Hopelijk is de verwarring nu eindelijk weg.....

[ Voor 3% gewijzigd door Verwijderd op 01-02-2006 02:19 ]

[ZeilDude]

Niet boos worden CiPHER, nergens voor nodig. Ik vind het ook vaak lastig om die lange lappen tekst hier te lezen. En volgens mij jijzelf ook, omdat ik zojuist een oplossing vóór jouw post heb aangedragen waarin staat hoe het wel kan.

[Verwijderd]

Maar wat je wilt kan gewoon en is toch niet zo moeilijk?

Stel je hebt de volgende strucuur in je website (vanuit je root folder):
- index.htm
- Images/btnbackground.gif
- Incl/style.css

Dan doe je in style.css het volgende:

.btn {
border: none;
background-image: url(../Images/btnbackground.gif);
}

En zeg doe je gewoon in index.htm:
<link href="Incl/style.css" rel="stylesheet" type="text/css">

Verder geef je elke button de property class="btn" mee:
<input type="submit" value="Submit" class="btn">

En anders begrijp ik (we) je vraag gewoon niet. In ieder geval natuurlijk zorgen dat de paden kloppen in het css bestand! Dus url(btnbackground.gif); als style.css in je root folder zit, bijvoorbeeld.

[Verwijderd]

ZeilDude schreef op woensdag 01 februari 2006 @ 02:26:
Niet boos worden CiPHER, nergens voor nodig. Ik vind het ook vaak lastig om die lange lappen tekst hier te lezen. En volgens mij jijzelf ook, omdat ik zojuist een oplossing vóór jouw post heb aangedragen waarin staat hoe het wel kan.

Wat jij voorstelde was niet puur met CSS. Wat jij voorstelde is (wellicht?) wel de meest schone oplossing, maar niet perfect. In het ideale geval doe je alles met CSS. Maar soms lukt niet alles met puur CSS en moet je even klooien.

En ik ben niet boos.

[ZeilDude]

Verwijderd schreef op woensdag 01 februari 2006 @ 13:04:
[...]

Wat jij voorstelde was niet puur met CSS. Wat jij voorstelde is (wellicht?) wel de meest schone oplossing, maar niet perfect. In het ideale geval doe je alles met CSS. Maar soms lukt niet alles met puur CSS en moet je even klooien.

En ik ben niet boos.

Niet puur css? Waarom niet? Omdat er in de html een bronverwijzing zit naar een transparant plaatje? Die verwijzing is verplicht, omdat het een imagebutton betreft.
De button is volledig te stylen in css, en voor een hele website heb je slechts één transparante button nodig. De transparante image zorgt er alleen voor dat de styling volledig via css kan verlopen.

[Excibular]

Dit is de methode waarmee ik bekend ben:

code:

input.button {
background-image:url(button.jpg); 
font-weight: bold; 
font-size: 12px; 
color: white;}

De extra klasse moet worden gebruikt omdat anders de andere "input" onderdelen de achtergrond van de button mee krijgen.

Dus in je html krijg je zoiets:

code:

<form name="form1">
<input type="text" name="textfield">
<input class="button"type="submit" name="Submit" value="Submit">
<input class="button" type="reset" name="clear form" value="Clear">
</form>

Zo heb je een mooi formulier waarvan beide buttons worden gestyled door de CSS..
Dan heb je nog een probleem, door het veranderen van de background propertie raak je je rollover kwijt. Wil ik een button met een rollover dan kan dat voor zover ik weet alleen met javascript en gebruik ik daarvoor het volgende:

code:

onmouseover="this.className='buttonhover'" onmouseout="this.className='button'

[ Voor 29% gewijzigd door Excibular op 01-02-2006 14:13 ]

[Michali]

Wat denken jullie hier van:

HTML:

<style type="text/css">
div#button
{
    width: 285px;
    height: 110px;
    background: url(http://www.google.nl/intl/nl_nl/images/logo.gif);
}
div#button input
{
    width: 285px;
    height: 110px;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
</style>
<div id="button">
    <input type="submit"
        value="Verstuur"
        onclick="alert(1);"/>
</div>

Mischien niet helemaal relaxt door die opacity, maar het werkt wel goed. Bovendien zie je gewoon netjes een submit button met text als er geen stijlen worden gebruikt.

[Justice]

Serieus, je wil niet dat bezoekers met javascript uit je contactform niet kunnen versturen! Zie bijvoorbeeld Opera Mini, wat wel eens ervoor zou kunnen zorgen dat mobiel browsen gemeengoed wordt. En met vage hacks gaan werken wil je ook niet,want IE7 ligt om de hoek en dan moet je wellicht straks je site weer gaan aanpassen, en waarom hacks gebruiken wanneer het niet hoef. DJNonsens' oplossing is dan ook de beste mijn inziens, echter met een paar kanttekeningen.

Verwijderd schreef op woensdag 01 februari 2006 @ 02:44:
Maar wat je wilt kan gewoon en is toch niet zo moeilijk?

Stel je hebt de volgende strucuur in je website (vanuit je root folder):
- index.htm
- Images/btnbackground.gif
- Incl/style.css

Dan doe je in style.css het volgende:

.btn {
border: none;
background-image: url(../Images/btnbackground.gif);
}

En zeg doe je gewoon in index.htm:
<link href="Incl/style.css" rel="stylesheet" type="text/css">

Verder geef je elke button de property class="btn" mee:
<input type="submit" value="Submit" class="btn">

En anders begrijp ik (we) je vraag gewoon niet. In ieder geval natuurlijk zorgen dat de paden kloppen in het css bestand! Dus url(btnbackground.gif); als style.css in je root folder zit, bijvoorbeeld.

Helaas, als je in windows xp een desktop theme hebt aanstaan dan werkt dit niet!
wat je moet doen is

Cascading Stylesheet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
    <title></title>
    <style type="text/css" media="screen">
    .btn {
        border:0; 
        background: #ccc url(ac.gif) no-repeat top left;
        width:128px; 
        height:62px;
        cursor: pointer; /* usability */
    }
    </style>
</head>

<body>
<form>
<input type="submit" value="Submit" class="btn">
</form>

</body>
</html>

Raar maar waar. button:none (default waarde) laat windows xp de button met de desktop theme stylen, dit wil je niet want dan laat hij je plaatje niet zien. Dit is alleen als je background-image gebruikt (IE hoeft dan dus niets aan te passen aan de button dus gebruikt IE de theme). Herdefineer je background zoals in mijn voorbeeld (met een achtergrond), of gebruik border:0. Mijn voorbeeld gebruikt ze alletwee, voor het geval dat 1 van de twee wordt aangepast.

Daarnaast wil je een achtergrond kleur zowiezo meegeven zodat wanneer het plaatje niet laad je toch de button kan zien.
Daarnaast wil je de cursor in een pointer laten veranderen zodat het duidelijk is dat er geklikt kan worden (aangezien je de :hover state alleen op hyperlinks kan gebruiken in IE6)
Raar maar waar.

[ Voor 86% gewijzigd door Justice op 01-02-2006 14:30 ]

[Victor]

Justice schreef op woensdag 01 februari 2006 @ 14:13:
Serieus, je wil niet dat bezoekers met javascript uit je contactform niet kunnen versturen!

Ik denk dat de JavaScript hier meer bedoeld is om aan te geven dat de knop werkt. Het blijft een submit, dus extra JavaScript is niet nodig voor het functioneren van de knop.

Overigens is er een probleem wat ik en een aantal anderen hier over het hoofd hebben gezien, namelijk de valuetekst van de knop die doodleuk boven je achtergrond plaatje verschijnt en roet in het eten gooit. Michali z'n oplossing heeft daar geen last van, maar die extra DIV is dan wel weer zonde.

Ik kan echter zo gauw geen nettere oplossing bedenken...

[ZeilDude]

King_Louie schreef op woensdag 01 februari 2006 @ 18:49:
[...]

Ik kan echter zo gauw geen nettere oplossing bedenken...

Volgens mij heb je mijn post met een css-gestylde imagebutton over het hoofd gezien.

[ Voor 48% gewijzigd door ZeilDude op 01-02-2006 18:55 ]

[Victor]

ZeilDude schreef op woensdag 01 februari 2006 @ 18:54:
[...]

Volgens mij heb je mijn post met een css-gestylde imagebutton over het hoofd gezien.

Die heb ik inderdaad gezien, maar waarom stijl je de button, i.p.v. gewoon de image rechtstreeks op de button zelf te zetten?

[ZeilDude]

King_Louie schreef op woensdag 01 februari 2006 @ 19:02:
[...]

Die heb ik inderdaad gezien, maar waarom stijl je de button, i.p.v. gewoon de image rechtstreeks op de button zelf te zetten?

Zonder dit topic zou ik hier ook niet zo snel op gekomen zijn en zou ik de imagebutton gewoon via het src-attribuut voorzien van een afbeelding. Door mijn 'truc' kun je dit nu wel lekker centraal en overzichtelijk in je stylesheet houden. Ik denk dat deze oplossing het dichtst bij het antwoord zit dat TS zoekt.

[Excibular]

ZeilDude schreef op woensdag 01 februari 2006 @ 19:09:
[...]

Zonder dit topic zou ik hier ook niet zo snel op gekomen zijn en zou ik de imagebutton gewoon via het src-attribuut voorzien van een afbeelding. Door mijn 'truc' kun je dit nu wel lekker centraal en overzichtelijk in je stylesheet houden. Ik denk dat deze oplossing het dichtst bij het antwoord zit dat TS zoekt.

Maar waarom voeg je die transparante gif die extra transparante .gif toe aan je knop?

@justice dat is misschien wat duidelijker omschreven de manier die ik ook zou gebruiken. Vooral die tip van die cursor toevoeging is handig. Dat kan in sommige gevallen een simpel alternatief zijn voor een rollover.

[ Voor 19% gewijzigd door Excibular op 01-02-2006 20:05 ]

[ZeilDude]

ExCibular schreef op woensdag 01 februari 2006 @ 20:01:
[...]


Maar waarom voeg je die transparante gif die extra transparante .gif toe aan je knop?

@justice dat is misschien wat duidelijker omschreven de manier die ik ook zou gebruiken. Vooral die tip van die cursor toevoeging is handig. Dat kan in sommige gevallen een simpel alternatief zijn voor een rollover.

Omdat een src-attribuut verplicht is in een imagebutton. Door 'm transparant te maken kijk je er als het ware doorheen, naar de achtergrondafbeelding. Met de cursor eigenschappen hoef je niks te doen, die blijven gewoon werken. Alleen functioneert ie inderdaad niet als rollover, daarvoor zul je met een javascriptje moeten werken (de hover-eigenschap werkt niet).