[CSS/Javascript] Onchange plaatje textbox veranderen...

[The Milkman]

Hallo,

ik zou graag als ik een bepaalde keuze uit een combobox kies, de background image van een textbox veranderen van plaatje.

Het plaatje realiseer ik gewoon met css, en het javascript gedeelte dat ik eraanhang is een onChange().

Maar dan? Is het mogelijk om css dynamisch te veranderen met javascript, waarbij de verandering onmiddelijk ingaat zonder het refreshen van de pagina?

Bedankt,

[Verwijderd]

Je kan de classname van een element wijzigen met bijvoorbeeld onderstaande code:

code:

document.getElementById('idname').className = 'andere css classname';

[crisp]

of direct de style-property aanpassen:

JavaScript:

document.getElementById('textbox').style.backgroundImage = 'url(plaatje.gif)';

[ Voor 17% gewijzigd door crisp op 20-02-2006 08:44 ]

[Koppensneller]

code:

elem = document.getElementById('vulhierjeidin');
elem.style.backgroundImage = url('plaatje');

Should do the trick

edit:

Damn you guys

[ Voor 25% gewijzigd door Koppensneller op 20-02-2006 08:45 ]

[Rowanov]

Zoeken op Document Object Model! Hier alvast vier links waar het letterlijk in wordt uitgelegd:
http://www.melp.nl/index.php?page_id=346
http://developer.mozilla....tion#Important_Data_Types
http://developer.mozilla.org/en/docs/DOM:element.style
http://developer.mozilla....e#DOM_CSS_Properties_List

Typen en ontbijten werkt niet Het ligt er vast aan dat mijn verbinding naar Nederland heel traag is Groeten uit Zweden!

[ Voor 17% gewijzigd door Rowanov op 20-02-2006 08:55 ]

[The Milkman]

Hartstikke bedankt iedereen.

Nog een laatste vraagje,
ik heb nu dit scriptje gemaakt:

code:

function filetype() {
    var shortcut=document.submitimages
    var descri=new Array()
    descri[0]=""
    descri[1]="url(jpggif.gif)"
    descri[2]="url(onlygif.gif)"
    descri[3]="url(onlygif.gif)"
    document.getElementById('filearray[]').style.backgroundImage=descri[shortcut.ground1.selectedIndex];
}

Maar deze werkt niet in Firefox, maar wel in IE.
Welke dingen zijn niet compatible in firefox?

[ Voor 25% gewijzigd door The Milkman op 20-02-2006 09:51 ]

[Verwijderd]

var shortcut=document.submitimages

is dat je form? die zou ik niet zo benaderen, maar document.forms['submitimages']

verder ook bij shortcut.ground1.selectedIndex: shortcut.elements['ground1'].selectedIndex

[The Milkman]

Heel erg bedankt mensen!
Het is gelukt.

Kijk maar even: http://www.jurjexxxxxxxx.xxx
In Firefox is allen het plaatje niet te zien in het textvak, maar vaag onder de button.
Dit kan vast niet anders?

Om te zien wat er gebeurt moet je de eerste combobox op Background zetten.

OPGELOST!
BEDANKT !

[ Voor 11% gewijzigd door The Milkman op 21-02-2006 16:25 . Reden: opgelost ]