SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Showing additional remote image onmouseover

    I'm trying to make a background image appear to the side of a nav menu, but whenever I mouseover each link the background image appears that belongs to the last nav link. Can someone tell me how to make it so it will show the image that belongs to the nav link that is being hovered over?

    Code:
    #nav a {
    	display: block;
        text-indent: -9999px;
    }
    
    #a span {
    	background: url("i/a_i.png") no-repeat;
    }
    
    #b span {
    	background: url("i/b_i.png") no-repeat;
    }
    
    #c span {
    	background: url("i/c_i.png") no-repeat;
    }
    
    #nav span.show {
    	display: block;
    }
    
    #nav span {
    	display: none;
    	height: 113px;
    	position: relative;
    	left: 100px;
    	width: 154px;
    }
    Code:
    			<li id="a"><a href="/a">A</a><span></span></li>
    			<li id="b"><a href="/b">B</a><span></span></li>
    			<li id="c"><a href="/c">C</a><span></span></li>
    Code:
    		init : function() {
    			nav = document.getElementById('nav');
          		links = nav.getElementsByTagName('li', nav);
    
    			for (var i=0; i<links.length; i++) {
    				var info = links[i].lastChild;
    				Rezzner.Event.add(links[i], 'mouseover', function() { info.className = 'show'; });
    				Rezzner.Event.add(links[i], 'mouseout', function() { info.className = 'hide'; });
    			}
    
    			nav.style.display = 'none';
    }
    Any help would be greatly appreciated.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is a problem with closures. I don't know what your framework does (never heard of Rezzner) but the problem is that "info" will always refer to the last of your "links" when the event actually occurs. You would need to do this:
    Code:
    Rezzner.Event.add(links[i], 'mouseover', function() { this.lastChild.className = 'show'; });


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
  •