SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: multi-img mouseover
-
Apr 27, 2008, 07:30 #1
- 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>
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?
-
Apr 27, 2008, 07:36 #2
- 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)
-
Apr 27, 2008, 12:49 #3
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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])'
Code:document.getElementById('d1').onmouseover=doRollover; document.getElementById('d1').onmouseout=doRollover; //place below the div
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.
-
May 5, 2008, 13:28 #4
- 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
-
May 5, 2008, 13:31 #5
- 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