multi-img mouseover

[L4suicide]

<script type="text/javascript">
 function doRollover( e )
 {
 	// Obtain a reference to the lowest element
 	var o = ( document.all ) ? event.srcElement : e.target;
 
 	// If the element is not what we want, quit the function
 	if ( o.nodeName != 'IMG' ) return;
 
 	// Perform rollover
 	o.className = ( o.className == 'overClass' ) ? 'outClass' : 'overClass';
 }
 </script>
 
 <!-- Now for the interesting part -->
 <div onmouseover="doRollover()" onmouseout="doRollover()">
 	<img src="blah.gif" class="outClass" />
 	<img src="blah2.gif" class="outClass" />
 	<img src="blah3.gif" class="outClass" />
 <!-- Etc, etc -->
 </div>

I've just been looking at the FAQ bit and found something i needed to use.

However it doesn't seem to work. The console keeps saying event or e is not defined. And nothing happens when i mouse-over apart from those errors appearing.

I haven't done much with the DOM yet, but it looks like the code in the example is missing some bits?

[L4suicide]

(Yes i have modified it slightly to test. Rather than changing the classes i have put in

alert("yes?");

So i don't need to mess around creating a couple of classes and the images)

[Logic Ali]

The console keeps saying event or e is not defined. And nothing happens when i mouse-over apart from those errors appearing.

I'd say that article needs work. If you use inline event handlers, the function inside the handler must be passed the event object that was passed to the handler (for browsers that work this way). One way is like this:

onmouseover='doRollover(arguments[0])' onmouseout='doRollover(arguments[0])'

Alternatively you could give the div an id of say 'd1', then apply the event handlers unobtrusively:

document.getElementById('d1').onmouseover=doRollover;
document.getElementById('d1').onmouseout=doRollover; 
//place below the div

To avoid both flawed browser detection and the dreaded intermediate return statement, the doRollover function itself would be better written thus:

function doRollover( e )
{
 var evt = window.event||e;  
    
 // Obtain a reference to the lowest element
 var o =  evt.srcElement || evt.target;
 
 // If the element is what we want, apply appropriate class.
 if (  o.nodeName == 'IMG' )
  o.className = ( o.className == 'overClass' ) ? 'outClass' : 'overClass';
}

[L4suicide]

Thankyou yes that does work.

Although i am a little un-sure on your bit about calling it unobtrusively.

document.getElementById("d1") has no properties when i try using that. And i won't pretend i have enough experience with js or the DOM to understand much of this yet

[L4suicide]

Ah ok, realised i missed the 'after the div' bit.

Thanks