Jump to content


Photo

IE rollover prob.


  • Please log in to reply
7 replies to this topic

#1 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 06 August 2006 - 12:48 PM

Very simple task:

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

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';
	}
}

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

<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>

and this:
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;';		
	}
}

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?

#2 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 06 August 2006 - 12:58 PM

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

#3 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 06 August 2006 - 01:12 PM

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):

<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>

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;';		
	}
}

No go.

#4 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 06 August 2006 - 01:32 PM

Tried this:
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;';		
	}
}

No go. Not in IE, that is.

#5 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 06 August 2006 - 01:37 PM

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

#6 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 06 August 2006 - 07:57 PM

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

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

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;';
		}
	}
}

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...  ::)

#7 448191

448191
  • Staff Alumni
  • Advanced Member
  • 3,545 posts
  • LocationNetherlands

Posted 07 August 2006 - 08:57 AM

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;';

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


#8 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 07 August 2006 - 02:44 PM

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

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users