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,126
    What does your HTML look like?
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you 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 10: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,126
    I've updated your fiddle, only changing the JavaScript part:
    http://jsfiddle.net/dfreema1/LsAEu/5/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  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