Stylizing text input elements with background images
I often like to add background images to my text input elements, it’s a great way to stylize them and adds a nice little pop to small forms. The search box in the upper right corner of this blog is an example of this. I recently wrote this nice little javascript function to help me get this done quickly and easily.
Feel free to use this code wherever you please, it requires the prototype javascript library. There’s an example of the usage at the bottom.
crabenda.global.giveTextInputBackground = (function(){
handleFocus = function(e){
elem = Event.element(e);
elem.setStyle({’background’: ‘none’});
}
handleBlur = function(e){
elem = Event.element(e);
if(elem.value === ”){
elem.setStyle({’background’: ‘url(’+elem.backgroundImgSrc+’) no-repeat’});
}
}
return function(formElem,imgSrc){
formElem = $(formElem);
if(formElem){
formElem.backgroundImgSrc = imgSrc;
Event.observe(formElem,’focus’,handleFocus);
Event.observe(formElem,’blur’,handleBlur);
if(formElem.value === ”){
formElem.setStyle({’background’: ‘url(’+formElem.backgroundImgSrc+’) no-repeat’});
}
}
}
})();
handleFocus = function(e){
elem = Event.element(e);
elem.setStyle({’background’: ‘none’});
}
handleBlur = function(e){
elem = Event.element(e);
if(elem.value === ”){
elem.setStyle({’background’: ‘url(’+elem.backgroundImgSrc+’) no-repeat’});
}
}
return function(formElem,imgSrc){
formElem = $(formElem);
if(formElem){
formElem.backgroundImgSrc = imgSrc;
Event.observe(formElem,’focus’,handleFocus);
Event.observe(formElem,’blur’,handleBlur);
if(formElem.value === ”){
formElem.setStyle({’background’: ‘url(’+formElem.backgroundImgSrc+’) no-repeat’});
}
}
}
})();
Sample usage:
document.observe(”dom:loaded”,function(){
Event.observe(’submitbutton’,'click’,crabenda.header.submitButtonClickHandler);/search3.gif’)
});
Event.observe(’submitbutton’,'click’,crabenda.header.submitButtonClickHandler);/search3.gif’)
});
If any of the code looks odd(like maybe the parentheses before and after the function) then you need to watch more Douglas Crockford!
Cheers!
Tags: background image, css, form, stylize, text input element
11 Responses to “Stylizing text input elements with background images”
June 13th, 2011 at 12:30 am
hello…
really good article. Ready to hear more next week,my blog http://eveningdressesvuv.sweetcircles.com/2010/12/20/low-priced-night-dresses/ Many Thanks….
June 13th, 2011 at 4:42 pm
hello…
really good article. Ready to hear more next week,my blog http://talonmpgraham.xanga.com/749901497/adressing-wedding-invitations-envelopes/ Many Thanks….
June 16th, 2011 at 3:14 am
really good article…
I have spent a bit of time going through your posts, more than I should have but I must say, its worth it! http://wedding071.i.ph/blogs/wedding071/ many Thanks….
June 20th, 2011 at 3:49 am
hello…
Hello there just quality post! http://opera.simpleblog.org/ ,i’d a good read.appreciate your article,My problem has been resolved….
June 20th, 2011 at 4:46 pm
very helpful…
I preferred to thank you for this good article. http://wxzal.unblog.fr/ I by all odds liked every little bit of it…
June 21st, 2011 at 2:19 pm
Great…
You did a great job! http://denna.pimpblog.nl/54291/Raoul%3A+adorableness+in+totality.html...
June 27th, 2011 at 6:44 pm
Greate…
It’s such a great site! http://michaelankhan.insanejournal.com/1363.html Great post, I just bookmarked it on Digg….
August 9th, 2011 at 4:39 am
Great…
love your blog, http://ivy11.a-thera.jp/ ,Thanks again….
August 13th, 2011 at 9:58 am
Great One…
I must say, its worth it! My link, http://clement11.sexusblog.com/,thanks haha…
October 21st, 2011 at 2:54 pm
Great…
girl. she used to to taekwon do. but now she is feeling out of shape and wants to do a sport. she is already doing soccer and softball but that isn’t a good enough workout. preferably a sport that is year round that it isn’t too late to start now but…
December 1st, 2011 at 11:58 pm
quality post…
ugg fur boots love, http://www.elmodenawrestling.com ,thanks ugg…
Leave a Reply