Tabbed Content nested in a Javascript image map

diggitydang11 · 12-19-2012, 09:35 PM

Hi there,

I would appreciate some help, if anyone out there is in a position to help a newbie coder... I have a jQuery image map that renders subsequent divs below the image, based on where the user clicks (i.e. image map). Within those divs, I'm trying to include tabbed content... I've tried both jquery and pure css methods for those tabs, but each time, the tabbed content doesn't appear. Here is the code I'm using:

This is the script for the image map:

<script type="text/javascript">
function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}
function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
oShowHideDivs[i].style.display = 'none';
}
}

window.onload=function(){
oShowHideDivs = document.getElementById('foot_pain_container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
oMap.areas[i].indx = i;
oMap.areas[i].onclick=function(){showHideDivs(this.indx);return false;}
}
}
</script>

This is the code for the image map:

<img src="images/foot_pain.jpg" alt="" usemap="#myMap" />
<map name="myMap" id="myMap">
<area shape="rect" coords="127,37,188,67" href="" alt="foot_bottom1" />
<area shape="rect" coords="145,84,172,109" href="" alt="foot_bottom2" />
<area shape="rect" coords="52,157,79,181" href="" alt="foot_bottom3" />
<area shape="rect" coords="387,39,421,67" href="" alt="foot_bottom4" />
<area shape="rect" coords="598,77,627,102" href="" alt="foot_bottom5" />
<area shape="rect" coords="621,109,649,133" href="" alt="foot_bottom6" />
<area shape="rect" coords="670,66,702,88" href="" alt="foot_bottom7" />
</map>
</div>

<div id="foot_pain_container">

<div id="foot_bottom1"><h4>Metatarsalgia</h4><p>Lorem Metatarsalgia ipsum.</p></div>

<div id="foot_bottom2"><h4>Morton's Syndrome</h4><p>Lorem Morton ipsum.</p></div>

<div id="foot_bottom3"><h4>Plantar Faciitis</h4><p>Lorem Plantar ipsum.</p></div>

<div id="foot_bottom4"><h4>Test Pain</h4><p>Lorem Dang ipsum.</div>

<div id="foot_bottom5"><h4>Another Test Pain</h4><p>Lorem Schleien ipsum.</p></div>

<div id="foot_bottom6"><h4>Heel Pain</h4><p>Lorem Heel ipsum.</p></div>

<div id="foot_bottom7"><h4>Hallux Valgus (Bunions)</h4><p>Lorem Hallux ipsum.</p></div>

</div>

My stylesheet for the above includes:
#foot_pain_container div {display: none;}

What I'm trying to achieve:
I'm trying to put tabbed content in the div's from "foot_bottom1" to "foot_bottom5", with "Symptoms, Causes and Treatment" as my tabs.

Can anyone help with that? I hope I've made my intentions clear... have a happy holidays everyone and thanks so much!!

Old Pedant · 12-19-2012, 09:56 PM

Ummm..."I have a jQuery image map..."

I don't see one lick of jQuery in there.

Which is good, because I don't use jQuery.

But would you mind if I rewrote this to what I think would be a better way?

One that would avoid "ordering" problems?

diggitydang11 · 12-19-2012, 10:02 PM

Uhhhh, whoooops!!! See, I told you I was a newb!!! Ha!! Where is the "embarrassed" emoticon!?

Sorry... I actually realized that it wasn't jquery part-way through writing and I missed a couple spots changing the post...

I am totally open to changing the code around... Thanks so much for your help!! I think you've helped me before too!! You are awesome and I will buy you a beer if we ever met!!

Thanks so much.

Old Pedant · 12-19-2012, 10:16 PM

Here. This seems to work.

Basically, I just used the alt to match up with the id of the corresponding <div>. You already had all the alt's set up right, so it was easy.

Code:

<!DOCTYPE html>
<html>
<head>
<title> Fun With Feet </title>
<style type="text/css">
#foot_pain_container div {display: none;}
</style>
</head>

<body>
<img src="images/foot_pain.jpg" alt="" usemap="#myMap" />
<map name="myMap" id="myMap">
    <area shape="rect" coords="127,37,188,67" href="" alt="foot_bottom1" />
    <area shape="rect" coords="145,84,172,109" href="" alt="foot_bottom2" />
    <area shape="rect" coords="52,157,79,181" href="" alt="foot_bottom3" />
    <area shape="rect" coords="387,39,421,67" href="" alt="foot_bottom4" />
    <area shape="rect" coords="598,77,627,102" href="" alt="foot_bottom5" />
    <area shape="rect" coords="621,109,649,133" href="" alt="foot_bottom6" />
    <area shape="rect" coords="670,66,702,88" href="" alt="foot_bottom7" />
</map>
</div>
<div id="foot_pain_container">
    <div id="foot_bottom1"><h4>Metatarsalgia</h4><p>Lorem Metatarsalgia ipsum.</p></div>
    <div id="foot_bottom2"><h4>Morton's Syndrome</h4><p>Lorem Morton ipsum.</p></div>
    <div id="foot_bottom3"><h4>Plantar Faciitis</h4><p>Lorem Plantar ipsum.</p></div>
    <div id="foot_bottom4"><h4>Test Pain</h4><p>Lorem Dang ipsum.</div>
    <div id="foot_bottom5"><h4>Another Test Pain</h4><p>Lorem Schleien ipsum.</p></div>
    <div id="foot_bottom6"><h4>Heel Pain</h4><p>Lorem Heel ipsum.</p></div>
    <div id="foot_bottom7"><h4>Hallux Valgus (Bunions)</h4><p>Lorem Hallux ipsum.</p></div>
</div>

<script type="text/javascript">
(
  function() /* anonymous master function */
  {
      showHideDivs = document.getElementById('foot_pain_container').getElementsByTagName('div');
      
      var areas = document.getElementById('myMap').areas;
      for( var i=0; i < areas.length; i++)
      {
          areas[i].style.cursor = "pointer";
          areas[i].onclick = showCorrespondingDiv;
      }

      function showCorrespondingDiv( ) 
      {
          for ( var i = 0; i < showHideDivs.length; ++i )
          {
             showHideDivs[i].style.display = 'none';
          }
          document.getElementById(this.alt).style.display = "block";
          return false;
      }

   } /* end of anonymous master function */

)(); /* self-invoke the master function */
</script>
</body>
</html>

diggitydang11 · 12-20-2012, 01:04 AM

Thanks Old Pedant... however, I'm not sure if I was clear in my initial post. The image map works just fine (although I appreciate the cleaned up code and will update that portion accordingly). What I was trying to get help on was putting tabbed content inside of the displayed divs that appear when one of the image map spots are clicked. So, when the user gets to the page, they click on one of their pain points in their foot. It displays information below the image (which worked fine and is even cleaner with your last post!). But within that newly displayed div, I'd like to have tabbed content which includes Symptoms, Causes and Treatment. The user would see the Symptoms tab open, and can go to Causes or Treatment in a tabbed format.

Does that make sense? Is this something you can also help me with? Either way, I appreciate you taking the time to look at this.

diggitydang11 · 12-20-2012, 01:31 AM

In case the last post wasn't clear, I want the div, "foot_bottom1" to show tabbed content... 3 tabs...

Then, foot_bottom2, to have it's own 3 tabs generated...

and so forth...

Old Pedant · 12-20-2012, 01:48 AM

LOL! MAN, I *SURE* didn't get that from your first post!

Not hard at all! Back soon.

diggitydang11 · 12-20-2012, 01:51 AM

Quote:

Originally Posted by Old Pedant

LOL! MAN, I *SURE* didn't get that from your first post!

Not hard at all! Back soon.

My bad... My communication skills are as strong as my coding skills!!! Hahahaha.

Old Pedant · 12-20-2012, 02:32 AM

Hope all this code is allowed.

Code:

<!DOCTYPE html>
<html>
<head>
<title> Fun With Feet </title>
<style type="text/css">
.foot_pain { display: none;
             position: relative;
             width: 80%;
}

div.tabBody { position: absolute; top: 40px; left: 0px; 
              width: 100%; height: 100%;
              z-index: 1; 
              background-color: yellow; border: solid brown 2px; 
              padding: 20px; 
            }
div.tabHead { position: absolute; top: 20px; left: 10px; 
              width: 100px; height: 22px;
              z-index: 2;
              cursor: pointer;
              text-align: center; 
              background-color: lightyellow; border: solid brown 2px; border-bottom: none;
            }

div.Symptoms { display: block; }
div.Causes, div.Treatments { display: none; }

</style>
</head>

<body>
<img src="images/foot_pain.jpg" slt="" usemap="#myMap" />
<map name="myMap" id="myMap">
    <area shape="rect" coords="127,37,188,67" href="" alt="foot_bottom1" />
    <area shape="rect" coords="145,84,172,109" href="" alt="foot_bottom2" />
    <area shape="rect" coords="52,157,79,181" href="" alt="foot_bottom3" />
    <area shape="rect" coords="387,39,421,67" href="" alt="foot_bottom4" />
    <area shape="rect" coords="598,77,627,102" href="" alt="foot_bottom5" />
    <area shape="rect" coords="621,109,649,133" href="" alt="foot_bottom6" />
    <area shape="rect" coords="670,66,702,88" href="" alt="foot_bottom7" />
</map>
</div>
<div id="foot_pain_container">
    <div class="foot_pain" id="foot_bottom1"><h4>Metatarsalgia</h4>
        <div class="tabHead">Symptoms</div>
        <div class="tabHead" style="left: 140px;">Causes</div>
        <div class="tabHead" style="left: 260px;">Treatments</div>
        <div class="tabBody Symptoms">
             These are symptoms for foot_bottom 1
        </div>
        <div class="tabBody Causes">
             These are CAUSES for foot_bottom 1
        </div>
        <div class="tabBody Treatments">
             And TREATMENTS for foot_bottom 1
        </div>
    </div>
    <div class="foot_pain" id="foot_bottom2"><h4>Morton's Syndrome</h4>
        <div class="tabHead">Symptoms</div>
        <div class="tabHead" style="left: 140px;">Causes</div>
        <div class="tabHead" style="left: 260px;">Treatments</div>
        <div class="tabBody Symptoms">
             These are symptoms for foot_bottom 2
        </div>
        <div class="tabBody Causes">
             These are CAUSES for foot_bottom 2
        </div>
        <div class="tabBody Treatments">
             And TREATMENTS for foot_bottom 2
        </div>
    </div>
    <div class="foot_pain" id="foot_bottom3"><h4>Plantar Faciitis</h4>
        <div class="tabHead">Symptoms</div>
        <div class="tabHead" style="left: 140px;">Causes</div>
        <div class="tabHead" style="left: 260px;">Treatments</div>
        <div class="tabBody Symptoms">
             These are symptoms for foot_bottom 3
        </div>
        <div class="tabBody Causes">
             These are CAUSES for foot_bottom 3
        </div>
        <div class="tabBody Treatments">
             And TREATMENTS for foot_bottom 3
        </div>
    </div>
    <div class="foot_pain" id="foot_bottom4"><h4>Test Pain</h4>
        <div class="tabHead">Symptoms</div>
        <div class="tabHead" style="left: 140px;">Causes</div>
        <div class="tabHead" style="left: 260px;">Treatments</div>
        <div class="tabBody Symptoms">
             These are symptoms for foot_bottom 4
        </div>
        <div class="tabBody Causes">
             These are CAUSES for foot_bottom 4
        </div>
        <div class="tabBody Treatments">
             And TREATMENTS for foot_bottom 4
        </div>
    </div>
    <div class="foot_pain" id="foot_bottom5"><h4>Another Test Pain</h4>
        <div class="tabHead">Symptoms</div>
        <div class="tabHead" style="left: 140px;">Causes</div>
        <div class="tabHead" style="left: 260px;">Treatments</div>
        <div class="tabBody Symptoms">
             These are symptoms for foot_bottom 5
        </div>
        <div class="tabBody Causes">
             These are CAUSES for foot_bottom 5
        </div>
        <div class="tabBody Treatments">
             And TREATMENTS for foot_bottom 5
        </div>
    </div>
    <div class="foot_pain" id="foot_bottom6"><h4>Heel Pain</h4>
        <div class="tabHead">Symptoms</div>
        <div class="tabHead" style="left: 140px;">Causes</div>
        <div class="tabHead" style="left: 260px;">Treatments</div>
        <div class="tabBody Symptoms">
             These are symptoms for foot_bottom 6
        </div>
        <div class="tabBody Causes">
             These are CAUSES for foot_bottom 6
        </div>
        <div class="tabBody Treatments">
             And TREATMENTS for foot_bottom 6
        </div>
    </div>
    <div class="foot_pain" id="foot_bottom7"><h4>Hallux Valgus (Bunions)</h4>
        <div class="tabHead">Symptoms</div>
        <div class="tabHead" style="left: 140px;">Causes</div>
        <div class="tabHead" style="left: 260px;">Treatments</div>
        <div class="tabBody Symptoms">
             These are symptoms for foot_bottom 7
        </div>
        <div class="tabBody Causes">
             These are CAUSES for foot_bottom 7
        </div>
        <div class="tabBody Treatments">
             And TREATMENTS for foot_bottom 7
        </div>
    </div>
</div>

<script type="text/javascript">
(
  function() /* anonymous master function */
  {
      // a hack for MSIE 7 et al.
      function divsByClassName( container, cname )
      {
          if ( container.getElementsByClassName != null ) 
          {
              return container.getElementsByClassName( cname );
          }
          // for older MSIE:
          var check = container.getElmentsByTagName("div");
          var divs = [ ];
          for ( var c = 0; c < check.length; ++c )
          {
              var div = check[c];
              if ( div.className.indexOf(cname) >= 0 ) { divs.push[div]; }
          }
          return divs;
      }
          
      showHideDivs = divsByClassName( document.getElementById("foot_pain_container"), "foot_pain" );
  
      // set up the tabs in each foot_pain div:
      var allTabs = divsByClassName( document, "tabHead" );
      for ( var t = 0; t < allTabs.length; ++t )
      {
          allTabs[t].onclick = front;
      }

      function front( )
      {
          var holder = this.parentNode; // should be a div with class "foot_pain"
          var bodies = divsByClassName( holder, "tabBody" );
          // could have used a loop, but why for only 3:
          bodies[0].style.display = bodies[1].style.display = bodies[2].style.display = "none";
          // then "turn on" the appropriate body:
          divsByClassName( holder, this.innerHTML )[0].style.display = "block";
      }

      // then set up map areas
      var areas = document.getElementById('myMap').areas;
      for( var i=0; i < areas.length; i++)
      {
          areas[i].style.cursor = "pointer";
          areas[i].onclick = showCorrespondingDiv;
      }

      function showCorrespondingDiv( ) 
      {
          for ( var i = 0; i < showHideDivs.length; ++i )
          {
             showHideDivs[i].style.display = 'none';
          }
          var show = document.getElementById(this.alt);

          // always reset to Symptoms tab...*** OPTIONAL ***
          var bodies = divsByClassName( show, "tabBody" );
          bodies[0].style.display = "block";
          bodies[1].style.display = bodies[2].style.display = "none";
          // end of optional

          show.style.display = "block";
          return false;
      }

   } /* end of anonymous master function */

)(); /* self-invoke the master function */
</script>
</body>
</html>

Old Pedant · 12-20-2012, 02:37 AM

Things you can change in the style:

Code:

<style type="text/css">
.foot_pain { display: none;
             position: relative;
             width: 80%;
}

div.tabBody { position: absolute; top: 40px; left: 0px; 
              width: 100%; height: 100%;
              z-index: 1; 
              background-color: yellow; border: solid brown 2px; 
              padding: 20px; 
            }
div.tabHead { position: absolute; top: 20px; left: 10px; 
              width: 100px; height: 22px;
              z-index: 2;
              cursor: pointer;
              text-align: center; 
              background-color: lightyellow; border: solid brown 2px; 
              border-bottom: none;
            }

You *CAN* also change some of the other values. Such as top for the tabBody and tabHead and height for the tabHead and and padding for tabBody.

Beyond that, if you play with values, make sure they work.

Old Pedant · 12-20-2012, 02:38 AM

Quote:

Originally Posted by diggitydang11

My bad... My communication skills are as strong as my coding skills!!! Hahahaha.

Well, my READING skills aren't too hot, for sure. When I go back and reread what you wrote, I sure see what you meant. I just skipped too much first time through, I think.

Old Pedant · 12-20-2012, 02:41 AM

And note that one of the important changes I made was assigning "foot_pain" class name to all those second-level <div>s. Could have avoided it, but since I wanted to be able to use getElementsByClassName (or the MSIE 7 hack equivalent) for other reasons, it was easier to just put them in.

diggitydang11 · 12-20-2012, 05:58 AM

Thanks again Old Pedant... it worked like a charm!!! I'm just playing with some of the styling now and seeing what I can break!!!

I appreciate your time, generosity and coding skills!!! Thanks also for going the extra mile to let me know stuff that I can change and changes you made to the code so I can learn from it too!!

Have a happy holiday and new year!!

Old Pedant · 12-20-2012, 06:56 PM

I think the nice part about all that is how little JS code there really is.

Sure, we could have used jQuery to do all this, but why, when the vanilla JS is so small, already?

diggitydang11 · 12-20-2012, 09:07 PM

Quote:

Originally Posted by Old Pedant

I think the nice part about all that is how little JS code there really is.

Sure, we could have used jQuery to do all this, but why, when the vanilla JS is so small, already?

True... but for newbs like me, I would never be able to write JS by myself, so I do like jQuery when it's available... but if it's a short script, I don't mind throwing straight JS into my pages...

Hey, by the way, why is it that this script only works when placed below the content in the body, as opposed to how I've typically seen JS in the header or footer?