Tabbed Content nested in a Javascript image map
 

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!!

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?

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.

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.

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.

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...

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.

Hope all this code is allowed.

Things you can change in the style:
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.

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.

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.

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!!

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?