Jump to content

IE rollover prob.


448191

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.