SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multi-img mouseover

    HTML Code:
    <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?

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (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)

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by L4suicide View Post
    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:
    Code:
    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:

    Code:
    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:
    Code:
    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';
    }
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok, realised i missed the 'after the div' bit.

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •