Jump to content

Archived

This topic is now archived and is closed to further replies.

448191

IE rollover prob.

Recommended Posts

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?

Share this post


Link to post
Share on other sites
By the way, if I remove any references to the later function everything works fine again...

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
By the way, it keeps saying "object is expected" on rollover, and "Id is expected" on initial page load.

Share this post


Link to post
Share on other sites
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...  ::)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
[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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.