Solved

Use JQuery to take image map select and expand accordion element

Posted on 2014-03-21
9
1,360 Views
Last Modified: 2014-03-26
Wondering if you could help me with this bit of JavaScript.. The challenge is to identify the region selected on the image map (I added ID tags but any code I’ve tried only returns the ID of the <map> and not the <area> tag.  The second task is to change whatever accordion element currently has aria-expanded=’true’ to false and tabindex from 0 to -1.  Then based on the region select on map change the corresponding accordion element to aria-expanded = true and tabindex to 0.
 
I found some articles that explain approaches but I can’t get the proper id tag from the map to be shown let alone work with the aria and tabindex elements.
<LINK REMOVED> check why here
 
Any help you can give will be greatly appreciated.
 
//IMAGE MAP
<p>
<img alt="" contenteditable="false" src="http://www.hhs.gov/iea/images/regionsmap.jpg" style=" border: 0;" usemap="#Map">
<map id="Map" name="Map">
<area alt="Region 1" id="region-1" contenteditable="false" coords="581,157,604,113,625,117,637,143,613,198,591,211,589,179" href="#" shape="poly">
<area alt="Region 3" id="region-3" contenteditable="false" coords="552,235" href="#" shape="poly">
<area alt="Region 4" id="region-4" contenteditable="false" coords="503,280,496,269,474,268,434,299,416,341,418,378,432,392,509,395,547,454,559,433,526,378,529,357,583,294,577,284,495,296" href="#" shape="poly">
<area alt="Region 5" id="region-5" contenteditable="false" coords="345,130,353,202,400,204,414,225,404,250,429,292,440,290,443,281,458,276,471,261,498,261,508,248,511,217,482,217,492,206,472,167,463,152" href="#" shape="poly">
<area alt="Region 6" id="region-6" contenteditable="false" coords="212,298,204,379,215,380,218,373,231,374,264,413,274,401,317,449,338,462,333,433,342,421,361,409,371,400,389,401,408,405,431,404,421,388,400,385,407,376,409,360,408,345,418,311,369,310,327,306" href="#" shape="poly">
<area alt="Region 7" id="region-7" contenteditable="false" coords="273,218,270,237,292,243,293,294,364,298,373,304,414,301,411,308,423,308,425,299,401,246,404,221,398,210,353,209,349,219" href="#" shape="poly">
<area alt="Region 8" id="region-8" contenteditable="false" coords="165,112,163,130,169,151,173,152,172,166,187,185,200,185,200,224,170,216,155,283,212,293,285,295,288,244,265,240,268,214,311,213,346,215,340,133" href="#" shape="poly">
<area alt="Region 9" id="region-9" contenteditable="false" coords="66,192,65,204,60,214,61,241,74,305,50,365,81,421,135,421,141,404,106,337,174,370,196,374,206,300,149,284,163,218" href="#" shape="poly">
<area alt="Region 10" id="region-10" contenteditable="false" coords="57,5,34,18,32,41,35,80,53,87,51,107,66,100,78,100,83,110,66,189,196,218,198,188,177,179,165,161,166,151,157,135,156,110,167,105,141,106,107,97,114,66,97,8" href="#" shape="poly">
<area alt="Region 2" id="region-2" contenteditable="false" coords="573,161,559,165,552,178,532,191,523,208,568,199,575,218,578,223,574,237,585,240,588,208,582,203,584,177" href="#" shape="poly">
<area alt="Region 2" id="region-2" contenteditable="false" coords="612,235,606,249,602,321,668,323,701,239" href="#" shape="poly">
<area alt="Region 3" id="region-3" contenteditable="false" coords="514,213,519,229,515,247,505,266,510,276,505,289,576,279,579,256,569,236,570,214,562,209,546,211" href="#" shape="poly">
</map>
</p>
 

Open in new window

//ACCORDION CODE (REDUCED TO 5 ELEMENTS FOR DEMO PURPOSES)
 
<div class="view-content ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
        <div class="views-row views-row-1 views-row-odd views-row-first">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span>        <span class="field-content"><a href="#map-panel_pane_1-0">Region 1</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/40" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Connecticut</a></li>
<li><a href="/peerta/taxonomy/term/41" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Maine</a></li>
<li><a href="/peerta/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Massachusetts</a></li>
<li><a href="/peerta/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New Hampshire</a></li>
<li><a href="/peerta/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Rhode Island</a></li>
<li class="last"><a href="/peerta/taxonomy/term/45" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Vermont</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-2 views-row-even">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-1">Region 2</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New Jersey</a></li>
<li><a href="/peerta/taxonomy/term/47" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New York</a></li>
<li><a href="/peerta/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Puerto Rico</a></li>
<li class="last"><a href="/peerta/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Virgin Islands</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-3 views-row-odd">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-2">Region 3</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/50" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Delaware</a></li>
<li><a href="/peerta/taxonomy/term/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">District of Columbia</a></li>
<li><a href="/peerta/taxonomy/term/52" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Maryland</a></li>
<li><a href="/peerta/taxonomy/term/53" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Pennsylvania</a></li>
<li><a href="/peerta/taxonomy/term/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Virginia</a></li>
<li class="last"><a href="/peerta/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">West Virginia</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-4 views-row-even">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-3">Region 4</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/56" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Alabama</a></li>
<li><a href="/peerta/taxonomy/term/57" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Florida</a></li>
<li><a href="/peerta/taxonomy/term/58" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Georgia</a></li>
<li><a href="/peerta/taxonomy/term/59" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Kentucky</a></li>
<li><a href="/peerta/taxonomy/term/60" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Mississippi</a></li>
<li><a href="/peerta/taxonomy/term/61" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">North Carolina</a></li>
<li><a href="/peerta/taxonomy/term/62" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">South Carolina</a></li>
<li class="last"><a href="/peerta/taxonomy/term/63" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Tennessee</a></li>
</ul></div></div>  </div></div>  </div>  
    </div>

Open in new window

0
Comment
Question by:rjjigg
  • 6
  • 3
9 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39946456
You don't  really need and ID but you can use zero based index instead.
Test page : http://jsfiddle.net/76Zhf/1/

    $("#Map area").click(function() {
        var id = $(this).attr("id");
        alert("you clicked on area " + id);
    });

Open in new window

0
 

Author Comment

by:rjjigg
ID: 39946489
Awesome, what about the second part of my question?  How do you take id attribute say 2, close whatever is currently expanded in the accordion (Region 1 in the demo code provided) and expand Region 2?  

I know we need to change the aria-expanded and noindex values but I dont know how to do that.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39946513
    $("#Map area").click(function() {
        var id = $(this).attr("id");
        accordion_number = id.replace(/\D/, "") * 1 - 1;
        $("#accordion").accordion({"active": 2}); // accordion is the ID of your accordion, I did not find one on the HTML you post...
    });

Open in new window


If you need more help, setup a working page (on complete mine) on jsfiddle
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:rjjigg
ID: 39946552
It's drupal code so may not be clear, see stripped version below.  

This is the first accordion selection where the header says "Region 1", you can see the aria-expanded and tabindex element in the second div; this one is expanded:

<div class="views-row views-row-1 views-row-odd views-row-first">      
<div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span><span class="field-content"><a href="#map-panel_pane_1-0">Region 1</a></span>
</div>  
</div>

Open in new window


This is Region 2, not expanded:
<div class="views-row views-row-2 views-row-even">      
<div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1">
<span class="ui-icon ui-icon-triangle-1-e"></span><span class="field-content"><a href="#map-panel_pane_1-1">Region 2</a></span>
</div>
</div>

Open in new window


So when you click on Region 2 on the map, aria-expanded on region 1 in the html above needs to change to false and tabindex to -1 AND region 2 in the html above needs aria-expanded set to true and tabindex to 0.

I'll try setting up a working page.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39946554
I was thnking you're using jQUeyr Accordion...
http://jqueryui.com/accordion/
0
 

Author Comment

by:rjjigg
ID: 39946745
That's exactly what we're using.. within Drupal.  I'll post replacing aria and noindex in another post, but first the accordion_number based on your code alerts NaN.  Can you fix the regex to work?

$("#Map area", context).click(function() { 
          var id = $(this).attr('id');
          var accordion_number = id.replace(/\D/, "") * 1 - 1;
          alert(accordion_number);

Open in new window

0
 

Assisted Solution

by:rjjigg
rjjigg earned 0 total points
ID: 39946770
This did the trick:
$(".view-display-id-panel_pane_1 > .view-content").accordion({active: 2});

Open in new window


If you would be so kind as to help fix that regex, we're done!!!  Thank you so much.
0
 

Author Comment

by:rjjigg
ID: 39946779
Nevermind, this solved it..  Thanks again.

var accordion_number = id.replace("region-", "") * 1 - 1;

Open in new window

0
 

Author Closing Comment

by:rjjigg
ID: 39955482
leakim971 got the hard part out of the way and pointed me in the right direction to finish, a little bit of digging and all is solved!  Thank you.
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How can I use an anonymous question as a Google Maps call-back function? 4 27
ajax to record click 3 16
Javascript 2 28
I'm a Human captcha checkbox 13 23
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question