www.webdeveloper.com
Results 1 to 7 of 7

Thread: optimize code of multiple hover

  1. #1
    Join Date
    Dec 2006
    Posts
    145

    Question optimize code of multiple hover

    I have a simple question about calling the same function to multiple ellmenets. I guess it should be done with index.

    Here's my code:

    Code:
    $('.tab_map1 area').hover(function(){
    	$('#nav1').find('a').stop().toggleClass('hover', 500);
    		return false;
    });
    $('.tab_map2 area').hover(function(){
    	$('#nav2').find('a').stop().toggleClass('hover', 500);
    		return false;
    });
    $('.tab_map3 area').hover(function(){
    	$('#nav3').find('a').stop().toggleClass('hover', 500);
    		return false;
    });
    $('.tab_map4 area').hover(function(){
    	$('#nav4').find('a').stop().toggleClass('hover', 500);
    		return false;
    });
    
    ... (there's 8 of them)
    My problem is I have 8 ellements with the same structure and identical names. I'd like to not repeat the same code multiple times. Is there a chance to replace .tab_map1-8 and #nav1-8 with some index value?

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    What does your HTML look like?

  3. #3
    Join Date
    Dec 2006
    Posts
    145
    Code:
    <!-- NAVIBAR -->
    <div id="navibar">
    	<ul>
    		<li id="nav1" class="active">
    		<span class="tab_corner_L">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left_first" />
    			<map class="tab_map1" name="tab_corner_left_first">
    				<area shape="poly" coords="19,0, 24,0, 24,40, 0,40, 3,36, 15,6" href="#" alt="xxx" />
    			</map>
    		</span>
    		<span class="tab_corner_R">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
    			<map class="tab_map1" name="tab_corner_right">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<a href="#">Home</a>
    		</li>
    		
    		<li id="nav2">
    		<span class="tab_corner_L">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
    			<map name="tab_corner_left">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<span class="tab_corner_R">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
    			<map name="tab_corner_right">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<a href="#">Subpage 1</a>
    		</li>
    		
    		<li id="nav3">
    		<span class="tab_corner_L">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
    			<map name="tab_corner_left">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<span class="tab_corner_R">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
    			<map name="tab_corner_right">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<a href="#">Subpage 2</a>
    		</li>
    		
    		<li id="nav4">
    		<span class="tab_corner_L">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
    			<map name="tab_corner_left">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<span class="tab_corner_R">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
    			<map name="tab_corner_right">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<a href="#">Subpage 3</a>
    		</li>		
    		
    		<li id="nav5">
    		<span class="tab_corner_L">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
    			<map name="tab_corner_left">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<span class="tab_corner_R">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
    			<map name="tab_corner_right">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<a href="#">Subpage 4</a>
    		</li>
    		
    		<li id="nav6">
    		<span class="tab_corner_L">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
    			<map name="tab_corner_left">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<span class="tab_corner_R">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
    			<map name="tab_corner_right">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<a href="#">Subpage 5</a>
    		</li>
    
    		<li id="nav7">
    		<span class="tab_corner_L">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
    			<map name="tab_corner_left">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<span class="tab_corner_R">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
    			<map name="tab_corner_right">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<a href="#">Subpage 6</a>
    		</li>
    
    		<li id="nav8">
    		<span class="tab_corner_L">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
    			<map name="tab_corner_left">
    				<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
    				<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<span class="tab_corner_R">
    			<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right_last" />
    			<map name="tab_corner_right_last">
    				<area shape="poly" coords="0,0, 4,0, 7,5, 19,36, 23,40, 0,40" href="#" alt="xxx" />
    			</map>
    		</span>
    		<a href="#">Subpage 7</a>
    		</li>
    	</ul>
    <div class="clear">&nbsp;</div>
    </div>
    <!-- NAVIBAR end -->
    I tried:

    Code:
    var n = 8;
    $('li.tab_map area').eq(n).hover(function(){
        $('#nav').eq(n).find('a').stop().toggleClass('hover', 500);
            return false;
    });
    and

    Code:
    $("#navibar ul").each(function(index) {
    $('.tab_map:eq(' + index + ') area').hover(function(index){
        $('#nav:eq(' + index + ')').find('a').stop().toggleClass('hover', 500);
            return false;
    });
    });
    but it doesn't work.
    Last edited by Annaccond; 09-02-2011 at 11:56 AM.

  4. #4
    Join Date
    Sep 2009
    Posts
    159
    Does Firebug toss you any error in the script?

  5. #5
    Join Date
    Dec 2006
    Posts
    145
    Code is fine and works - I'd like to just make jQ shorter way (if possible).

    Here's working JSfiddle example:

    http://jsfiddle.net/LsAEu/

  6. #6
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    I've updated your fiddle, only changing the JavaScript part:
    http://jsfiddle.net/dfreema1/LsAEu/5/

  7. #7
    Join Date
    Dec 2006
    Posts
    145
    Thank you very much cbVision! This is exactly I tried to achieve.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles