Page 1 of 1

Javascript - changing CSS classes - won't work in IE

Posted: Thu Jul 20, 2006 7:14 am
by MarK (CZ)
Stupid IE once again :evil:
Or maybe it's me :P


The problem is like this - I'm using JavaScript to change the classes of DIV. In Firefox everything works fine but IE seems to "see" only the first of the generated classes.

Code: Select all

<style type='text/css'>
div#mapcz_top.range1 {background-color: red; background-position: 175px 107px;}
div#mapcz_top.range17 {background-color: red; background-position: 176px 108px;}
div#mapcz_top.range4 {background-color: red; background-position: 172px 102px;}
[...]
  </style>

Code: Select all

<a href='#' onmouseover='document.getElementById("mapcz_top").className = "range1"'
             onmouseout='document.getElementById("mapcz_top").className = "nospot"'>AVIM Praha</a><br />
<a href='#' onmouseover='document.getElementById("mapcz_top").className = "range17"'
             onmouseout='document.getElementById("mapcz_top").className = "nospot"'>Kapslovna</a><br />
<a href='#' onmouseover='document.getElementById("mapcz_top").className = "range4"'
             onmouseout='document.getElementById("mapcz_top").className = "nospot"'>Magnum Praha</a><br />
[...]
Strange thing in IE is that only changing of the first class works as it should.
Any idea where is the problem solution?
:?:

Posted: Fri Jul 21, 2006 5:32 am
by MarK (CZ)
Noone has any idea? :(

Posted: Fri Jul 21, 2006 5:45 am
by Benjamin
Hmm,

try this..

Code: Select all

<a href="" class="range1" onmouseover="this.className='range1';" onmouseout="this.className='nospot';">blah</a>

Posted: Fri Jul 21, 2006 6:06 am
by MarK (CZ)
I'm not changing the class of the link itself but of another div, so I have to use it's id :?

Posted: Fri Jul 21, 2006 6:12 am
by Benjamin
Are you getting any Javascript errors in IE?

Posted: Fri Jul 21, 2006 6:31 am
by MarK (CZ)
No :(
That would at least point me somewhere...

Posted: Fri Jul 21, 2006 6:40 am
by MarK (CZ)
I tried cutting some of the generated classes - IE still works only with the first one of them.

Is there any error in my CSS code?

Code: Select all

<style type='text/css'>
div#mapcz_top.range11 {background-position: 172px 232px;}
div#mapcz_top.range12 {background-position: 197px 103px;}
div#mapcz_top.range13 {background-position: 279px 174px;}
div#mapcz_top.range14 {background-position: 192px 113px;}
div#mapcz_top.range15 {background-position: 236px 118px;}
div#mapcz_top.range16 {background-position: 278px 110px;}
div#mapcz_top.range17 {background-position: 176px 108px;}
[...]
</style>

Posted: Fri Jul 21, 2006 6:46 am
by Benjamin
No CSS looks fine. IE is quirky with JS though. I would just search around google and look at other examples and maybe try to find a different method.

Posted: Fri Jul 21, 2006 7:34 am
by MarK (CZ)
astions wrote:IE is quirky with JS though.
Is there any area where it isn't? :?

Anyway, I'm setting the BG position directly by the JS and seems to work...
Thanks for your time ;)