S@m Posted May 23, 2006 Share Posted May 23, 2006 I am changing the background of my input fields (text input only) with CSS.IE is a pile of junk and can't figure that out. So, I thought I could do it with JavaScript. function ieHover() { var inputs = document.getElementsByTagName('input'); for (var i=0; i<inputs.length; i++) { thisObj = inputs[i]; if(thisObj.getAttribute('type') == 'text'){ thisObj.className = 'iebkg' + thisObj.className; } }} window.onload = ieHover; That works setting the background color, but for mouseover...no luck. I thought I was real clever and could just use: thisObj.className = 'iehover' + thisObj.className; but that is a no go.The answer is hitting me in the face and I can't see it. What am I doing wrong that it won't pick up my onmouseover?Thank you for your time! Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 23, 2006 Share Posted May 23, 2006 I don't understand what exactly do you want? Do you want to instantly change the className of the input element when the page loads? Couldn't you just change the classname in the html part then? Or do you want to be able to change between two classes at user events (like click or mouseover)? Link to comment Share on other sites More sharing options...
Chocolate570 Posted May 23, 2006 Share Posted May 23, 2006 function ieHover() { var inputs = document.getElementsByTagName('input'); for (var i=0; i<=inputs.length; i++) {thisObj = inputs[i];if(thisObj.getAttribute('type') == 'text'){x=thisObj.className;thisObj.className = 'iebkg' + x; } }} window.onload = ieHover; try? Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 23, 2006 Share Posted May 23, 2006 Why should the old classNames be added, why don't you use CSS? I don't understand the meaning of this Link to comment Share on other sites More sharing options...
S@m Posted May 23, 2006 Author Share Posted May 23, 2006 I am using CSS to drive the entire page. Here is my CSS that works in Firefox to tell the text input fields what to do:CSS for FIREFOX: #locator input[type=text] {border:1px solid #CFD7B2;margin-top:2px;padding:1px;color:#666;background: #fff url(/images/input_bkg_02.gif) repeat-x;}#locator input[type=text]:hover {border:1px solid #4986FF;margin-top:2px;padding:1px;color:#333;background: #fff url(/images/input_bkg_02.gif) repeat-x;} CSS for IE: .iebkg{border:1px solid #CFD7B2;margin-top:2px;padding:1px;color:#666;background: #fff url(/images/input_bkg_02.gif) repeat-x;}.iehover{border:1px solid #4986FF;margin-top:2px;padding:1px;color:#333;background: #fff url(/images/input_bkg_02.gif) repeat-x;} But, IE can't figure that out. So, I did some research, and the way to accomplish the background swap in IE is by using JavaScript (above).I can get the background set. That works. I just can't get the mouseover part to work in IE using JavaScript. It's not swapping out the classes.Hopefully that made a little more sense? Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 23, 2006 Share Posted May 23, 2006 (edited) Yeah I understand, the pseudo class :hover doesn't work in IE with anything else than the anchor <a> I know...There should be a simple javascript though that enables individual styles to elements, triggered by the onmouseover event.Example: var Input = document.getElementsByTagName("input")for (s=0; s<Input.length; s++){ if (Input.type != "text") continue Input.onmouseover=function(){this.style.backgroundColor="something"} Input.onmouseout=function(){this.style.backgroundColor="something"}} Edited May 23, 2006 by Dan The Prof Link to comment Share on other sites More sharing options...
S@m Posted May 23, 2006 Author Share Posted May 23, 2006 Thanks Dan.Let me work with your example and see what I can come up with.I apreciate your help!! Link to comment Share on other sites More sharing options...
scott100 Posted May 24, 2006 Share Posted May 24, 2006 S@m, is this what you need? <html><head><title>title</title></head><body><input type="text" /><input type="text" /><script type="text/javascript">function hi(){ this.style.background="red";}function bye(){ this.style.background="white";}inCol=document.getElementsByTagName("input");for(i=0;i<inCol.length;i++) {inCol[i].onmouseover = hi;inCol[i].onmouseout = bye;}</script></body></html> Remember, you must put the javascript after the form elements Link to comment Share on other sites More sharing options...
Chocolate570 Posted May 24, 2006 Share Posted May 24, 2006 IE handles the CSS attribute selector? Link to comment Share on other sites More sharing options...
Jack McKalling Posted May 24, 2006 Share Posted May 24, 2006 IE handles the CSS attribute selector? <{POST_SNAPBACK}> If you mean like this: this.style.background="white";, then yes :)If you mean this in the stylesheet: .selector[attribute=something] { property:value; }, then no Link to comment Share on other sites More sharing options...
S@m Posted June 5, 2006 Author Share Posted June 5, 2006 So, after getting sidetracked, I was able to get back to this.I was able to get it to work from your help guys, so I really appreciate it. If anyone wants the code here it is. If you see something that I could do to improve, by all means let me know.Thank you!! // JavaScript text input rollovers for IEfunction ieHover() { var inputs = document.getElementsByTagName('input'); //alert(inputs); for (var i=0; i<inputs.length; i++) { //alert (i); thisObj = inputs[i]; if(thisObj.getAttribute('type') == 'text'){ //alert(thisObj); thisObj.className = 'iebkg' + thisObj.className; thisObj.onmouseout=function(){this.className= 'iebkg' + thisObj.className;} thisObj.onmouseover=function(){this.className= 'iehover' + thisObj.className;} } }} window.onload = ieHover; Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now