IE rollover prob.

[448191]

Very simple task:

[code]<img id="offerte" src="img.php?f=menu/offerte.gif" onmouseover="menuRollover(this.id,'over')"
onmouseout="menuRollover(this.id,'out')" alt=""/>[/code]

[code]function menuRollover(id,over_or_out) {
if(over_or_out == 'over') {
document.getElementById(id).src = 'img.php?f=menu/' + id + 'selected.gif';
}
else {
document.getElementById(id).src = 'img.php?f=menu/' + id + '.gif';
}
}[/code]

Works fine in FF, but not in IE. It did before, but then I added this:

[code]<div id="faq" onmouseover="subnav(this.id,'over')"
onmouseout="subnav(this.id,'out')" onclick="subnav(this.id,'click')">
<a href="nav.php?faq">
<img src="img.php?f=subnav/faq.gif" alt=""/>
<div class="line">IE is a pain.</div>
</a>
</div>[/code]

and this:
[code]
function subnav(id,over_down_or_out)
{
var layer = document.getElementById(id);
var linediv = layer.getElementsByTagName('div')[0];

if(over_down_or_out == 'over') {
linediv.style.backgroundColor  = '#999999';
}
else if(over_down_or_out == 'click') {
layer.style.class = 'subnavselected';
linediv.style.backgroundColor  = '#FF9900';
}
else {
linediv.style.backgroundColor  = '#666666;';
}
}[/code]

Now both of the functions work perfectly in FF, but helas, not in IE.  ::)

Simple task, mucho probs.  :'(

I quess I'll be a javascript n00b for a little longer...

Or maybe I'll write a virus that'll erase every last bit of IE code anywhere, for good. [evil]WHahahahahahah...[/evil]

Ok, back to reality:

Anyone care to enlighten me?

[448191]

By the way, if I remove any references to the later function everything works fine again...

[448191]

I thought, because getElementById works as expected in IE, maybe I'd make the javascript a little simpler (at the expense of cluttering my html):

[code]<div id="faq" onmouseover="subnav(this.id,'over')"
onmouseout="subnav(this.id,'out')" onclick="subnav(this.id,'click')">
<a href="nav.php?faq">
<img src="img.php?f=subnav/faq.gif" alt=""/>
<div id="faqline" class="line">&nbsp;</div>
</a>
</div>[/code]

[code]function subnav(id,over_down_or_out)
{
var layer = document.getElementById(id);
var linediv =  document.getElementById(id+'line');

if(over_down_or_out == 'over') {
linediv.style.backgroundColor  = '#999999';
}
else if(over_down_or_out == 'click') {
layer.style.class = 'subnavselected';
linediv.style.backgroundColor  = '#FF9900';
}
else {
linediv.style.backgroundColor  = '#666666;';
}
}[/code]

No go.

[448191]

Tried this:
[code]function subnav(id,over_down_or_out)
{
if (document.all) {
var layerStyleObj = eval ('document.all.'+id+'.style');
var lineStyleObj = eval ('document.all.'+id+'line.style');
}
else {
var layerStyleObj = document.getElementById(id).style;
var lineStyleObj = document.getElementById(id).getElementsByTagName('div')[0].style;
}
if(over_down_or_out == 'over') {
lineStyleObj.backgroundColor  = '#999999';
}
else if(over_down_or_out == 'click') {
layerStyleObj.class = 'subnavselected';
lineStyleObj.backgroundColor  = '#FF9900';
}
else {
lineStyleObj.backgroundColor  = '#666666;';
}
}[/code]

No go. Not in IE, that is.

[448191]

By the way, it keeps saying "object is expected" on rollover, and "Id is expected" on initial page load.

[448191]

I went on and developed the function. It still doesn't work in IE though. Anyone got a fix? Please?

[code]<div class="subnav" id="faq" onmouseover="subnav(this,'over');" onmouseout="subnav(this,'out');" onclick="subnav(this,'click');">[/code]

[code]function subnav(layer,over_down_or_out)
{
var linediv = layer.getElementsByTagName('div')[0];

if(over_down_or_out == 'over') {
if(layer.className !== 'subnavselected') {
linediv.style.backgroundColor  = '#999999';
}
}
else if(over_down_or_out == 'click') {
//Reset all divs' class names and line colours:
var divNodes = document.getElementById('subnavcontainer').getElementsByTagName('div');
for (i = 0; i < divNodes.length; i++) {
if(divNodes[i].className == 'subnavselected') {
divNodes[i].getElementsByTagName('div')[0].style.backgroundColor  = '#666666;';
divNodes[i].className = 'subnav';
}
}
//Set the elements' class:
layer.className = 'subnavselected';
linediv.style.backgroundColor  = '#FF9900';
//Rearrange layers:
layer.parentNode.insertBefore(layer,layer.parentNode.firstChild);
}
else {
if(layer.className !== 'subnavselected') {
linediv.style.backgroundColor  = '#666666;';
}
}
}[/code]

As you can probably see, I throw in the entire elementnode, not just it's id like before. Also on click I move the selected item to the top.

It works really well, and as a javascript nitwit, I'm pretty proud of it.

If only it would work in IE...  ::)

[448191]

Fixed it.

With the first version it had something to do with the this.id reference. For some reason, if I pass an id with this.id to a function, once in the function IE claims it isn't a valid id. Pobably an IE bug.

Second version only had a minor error in it, on which IE choked, but FF tolerated it:

linediv.style.backgroundColor  = '#666666[b][color=red];[/color][/b]';

I'm a happy camper now...  :P

[Daniel0]

[code]<img src="image1.gif" onmouseover="this.src='image2.gif'" onmouseout="this.src='image1.gif'" />[/code]

Is an easy way to make a roll-over. If anything else need to change when "rolling over" then just add it to the onmouseover and onmouseout.