SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tutorials and Resources Problem : Bubbling

    I am trying to get the bubbling tutorial working, but to no avail, the javascript I have is:

    Code:
              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';
              }
    and the following html:

    HTML Code:
      		<div class="block" id="navblock">
      			<div class="navcontainer">
     			 	<div class="navitems"onmouseover="doRollover()" onmouseout="doRollover()"><a href="/"><img src="/gfx/nav/navhome_off.gif" id="navhome" /></a><a
     			 	href="/newmedia"><img src="/gfx/nav/navnewmedia_off.gif" id="navnewmedia" /></a><a
     			 	href="/folio"><img src="/gfx/nav/navfolio_off.gif" id="navfolio" /></a><a
     			 	href="/contact"><img src="/gfx/nav/navcontact_off.gif" id="navcontact" /></a><a
     			 	href="/about"><img src="/gfx/nav/navabout_off.gif" id="navabout" /></a><a
     		 	href="/webservices"><img src="/gfx/nav/navwebservices_off.gif" id="navwebservices" /></a><a
     		 	href="/resume"><img src="/gfx/nav/navresume_off.gif" id="navresume" /></a><img
     			 	src="/gfx/nav/navblank.gif" id="navblank" /><br style="clear:both" /></div>
      			 </div>
      		</div>
    That is taken pretty much straight from the tutorial code. Is the function doRollover not expecting a value to be passed to it?! I'm trying to just get an image rollover in the minimum amount of code.

  2. #2
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok problem kind of solved, I now have:

    Code:
     function doRollOver( e , status )
     {
     	// Obtain a reference to the lowest element
     	var object = ( document.all ) ? event.srcElement : e.target;
     
     	// If the element is not what we want, quit the function
     	if ( object.nodeName != 'IMG' ) return;
     
     	// Perform rollover
     	object.src = '/gfx/nav/' + object.id + '_' + status + '.gif';
     
     }			
     -->
    and

    HTML Code:
     		<div class="block" id="navblock">
     			<div class="navcontainer">
     			 	<div class="navitems"onmouseover="doRollOver('','on');" onmouseout="doRollOver('','off');"><a href="/"><img src="/gfx/nav/navhome_off.gif" id="navhome" /></a><a
     			 	href="/newmedia"><img src="/gfx/nav/navnewmedia_off.gif" id="navnewmedia" /></a><a
     			 	href="/folio"><img src="/gfx/nav/navfolio_off.gif" id="navfolio" /></a><a
     			 	href="/contact"><img src="/gfx/nav/navcontact_off.gif" id="navcontact" /></a><a
     			 	href="/about"><img src="/gfx/nav/navabout_off.gif" id="navabout" /></a><a
     		    	href="/webservices"><img src="/gfx/nav/navwebservices_off.gif" id="navwebservices" /></a><a
     		    	href="/resume"><img src="/gfx/nav/navresume_off.gif" id="navresume"/></a><img
     			 	src="/gfx/nav/navblank_off.gif" id="navblank" /><br style="clear:both" /></div>
     			 </div>
     		</div>
    Works perfectly on Internet Explorer but not on mozilla/firefox


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
  •