[Fredrik-s]

Hej,

Jag har letat runt förgäves efter ett script som två olika checkboxar till två olika bilder beroende på viken man klickar.

Exempelvis, jag har två checkboxar en som är på ett äpple och en på ett päron. Som standard (när man inte klickat på dem) så är dem svart-vita. När man klickar på någon av dem blir dem i färg.

Jag har hittat färdiga lösningar där man kan byta ut checkboxar mot en bild, men då blir det samma stil på alla checkboxar. Alltså att markera upp dem med olika bilder har jag ej funnit.

Det flesta scripten identifierar om inputen har ett checkbox alternativ eller inte, vilket gör det problematiskt att ge en specifik checkbox en unik bilduppsättning.

Jag är ingen klippa på javascript, därför jag behöver så nära färdig lösning som möjligt.

Någon som har koll på vart jag kan hitta en sådan?

[KarlRoos]

http://ryanfait.com/resources/custom...radio-buttons/ är nog det som du är ute efter. Där används inte flera bilder utan CSS sprites: http://ryanfait.com/resources/custom...s/checkbox.gif

Om du inte vet vad CSS sprites är så finns det en bra artikel på A List Apart: http://www.alistapart.com/articles/sprites

Lycka till!

[Fredrik-s]

Ursprungligen postat av KarlRoos

http://ryanfait.com/resources/custom...radio-buttons/ är nog det som du är ute efter. Där används inte flera bilder utan CSS sprites: http://ryanfait.com/resources/custom...s/checkbox.gif

Om du inte vet vad CSS sprites är så finns det en bra artikel på A List Apart: http://www.alistapart.com/articles/sprites

Lycka till!

Tack för svar.

Har faktiskt pillat med det scriptet, men det har inte möjligheten att bestämma individuella bilder på olika checkboxar. Det scriptet sätter samma bild på alla checkboxar.

Jag vill alltså kunna ha olika bilder på respektive checkbox.

[KarlRoos]

I och med att den i exemplet (http://ryanfait.com/resources/custom...ttons/example/) enbart stylar dem som har en klass så går det med några mindre modifikationer.

Hur skall du använda dessa? Det kanske rentav är lättast att göra med lite jQuery istället och dölja den riktiga checkboxen, visa en bild istället, fånga click(), toggleClass() på bilden som visar checkboxen och attr("checked", true/false) på den riktiga checkboxen. Kan ge lite kodexempel om det behövs och det finns tid!

[RLM_JP]

Nu har jag inte testat skriptet utan bara skummat igenom det, men det ser ut som om det borde gå att ha olika bakgrundsbilder, och sålunda knapputseende genom att ange olika ID.

Såvitt jag kan se behöver du bara lägga till lite kod i css och html, inte ändra något, och helt utan att pilla på javascriptet. Lägg till olika ID ( id='paron', id='apple', etc ) för dina radio-knappar i html-filen, utöver den class som redan anges i instruktionerna för Ryans skript. Lägg sedan till dessa ID i slutet av css-filen med endast olika bakgrundsbilder angedda ( #apple { background-image: url('applesprite.jpg');}, etc ).

Som sagt, inte 100% på att det funkar klockrent, men det ser inte ut som om javascriptet är intresserat av källfilen till bakgrundsbilderna, utan bara css-positionering (á la sprites som redan nämnts).