Class not applied in IE6 with addClass ()

Question

I have the following DIV in my HTML that contains a large background image:

<div id="widget-image" class="tyreinfo1"></div>

Depending on the selected form selection window on the page, the background image will scroll to another point. These items are defined as follows:

#widget-image.tyreinfo1 { background-position: 0px -105px }
#widget-image.tyreinfo2 { background-position: 0px -210px }
#widget-image.tyreinfo3 { background-position: 0px -315px }
#widget-image.tyreinfo4 { background-position: 0px -420px }
#widget-image.tyreinfo5 { background-position: 0px -525px }

Code in the selection blocks:

onfocus="$('#widget-image').removeClass().addClass('tyreinfo1');"

5 selection fields, each of which adds a different tyreinfo class.

Surprise, surprise him by not working in IE6. I checked the use of the debug toolbar and the classes are definitely applied, however the initial position is reset to 0px 0px every time.

Any help appreciated!

Answer 1

html css, , CSS, , CSS IE6.

, # widget-image ( ), IE6 '# widget-image.tyreinfo1' '.tyreinfo1' ( ), #widget - .

#widget-image.tyreinfo1 { background-position: 0px -105px !important }

.

Answer 2

: .removeClass(), , . , . .

$('#widget-image').removeAttr('class').addClass('tyreinfo1');

Answer 3

PNG PNG- script? , IE6. URL- , .

Answer 4

@Inrbob. CSS, , . , , :

? . javascript .

$('#id1').click(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

, focus().

$('#id1').focus(function() {
  $('#widget-image').removeAttr('class').addClass('.whatever');
});

, .

, HTML CSS http://jsfiddle.net, .

.

Answer 5

, , css ;

#widget-image.tyreinfo1 { background-position: 0px -105px; }

, , :

onfocus="$('#widget-image').attr('class','tyreinfo1');"

In some cases, this worked for me; other methods failed. But, of course, publishing a bit more sample code can help.