Can anyone please fix this hide /show div code ...

[scotchegg78]

Hello guys

 

I have tried to modify this original source code ...

 

 

<script language="javascript"> 
<!-- 
var state = 'none'; 

function showhide(layer_ref) { 

if (state == 'block') { 
state = 'none'; 
} 
else { 
state = 'block'; 
} 
if (document.all) { //IS IE 4 or 5 (or 6 beta) 
eval( "document.all." + layer_ref + ".style.display = state"); 
} 
if (document.layers) { //IS NETSCAPE 4 or below 
document.layers[layer_ref].display = state; 
} 
if (document.getElementById &&!document.all) { 
hza = document.getElementById(layer_ref); 
hza.style.display = state; 
} 
} 
//--> 
</script> 

 

to display only one at a time,and when another is triggered it turns off the rest....

 

<script language="javascript"> 
<!-- 
var state = 'none'; 

function show(layer_ref) { 

for(i=0;i<20;i++){

if (document.all) { //IS IE 4 or 5 (or 6 beta) 
eval( "document.all.r" + i + ".style.display = none"); 
} 
if (document.layers) { //IS NETSCAPE 4 or below 
document.layers["r"+i].display = none; 
} 
if (document.getElementById &&!document.all) { 
hza = document.getElementById("r"+i); 
hza.style.display = none; 
} 
}


if (document.all) { //IS IE 4 or 5 (or 6 beta) 
eval( "document.all." + layer_ref + ".style.display = block"); 
} 
if (document.layers) { //IS NETSCAPE 4 or below 
document.layers[layer_ref].display = block; 
} 
if (document.getElementById &&!document.all) { 
hza = document.getElementById(layer_ref); 
hza.style.display = block; 
} 

} 
//--> 
</script>

 

 

the area maps for hover trigger are like ..

 

 <area shape ="circle"  coords ="157,139,8"
            onMouseOver="show('r11')" 
            href ="#nogo" target ="_blank" alt="Scotland" />
            

 

and divs ..

 

 <div id="r11" style="display: none;">This is the Scotland content</div>

 

but for some reason the orginal works fine, but not the modified, can you see where I have gone wrong?

 

thanks for any eagle eyes!

[sstalder]

Your function is named "showhide" and your calling "show".

[KevinM1]

Your function is named "showhide" and your calling "show".

 

Yeah, but that function.... :shudder:

 

A more elegant solution would be to scrap the original code and use modern techniques.

 

<script type="text/javascript">
   window.onload = function
   {
      var areaTags = document.getElementsByTagName("area");

      for(var i = 0; i < areaTags.length; i++)
      {
         areaTags[i].onmouseover = function()
         {
            var myDiv = document.getElementById("r" + i);
            myDiv.style.display = (myDiv.style.display == "block") ? "block" : "none";
         }
      }
   }
</script>

 

The above assumes that there's a 1:1 correlation between area elements and divs.  If not, there's a bit more work to be done, but the basics are there.

[scotchegg78]

Hi Nightsly

 

sorry I am not sure what you mean by 1:1 correlation. Do you mean are my are tags named r1 r2 etc in id?

my code is as you see it above, nothing else?

[KevinM1]

Hi Nightsly

 

sorry I am not sure what you mean by 1:1 correlation. Do you mean are my are tags named r1 r2 etc in id?

my code is as you see it above, nothing else?

 

I mean that for each area element, is there a corresponding r-something div?  In other words, does area element 11 (if there is one) relate to r11?

[scotchegg78]

Sadly no!

 

the r"some number" is actaully a DB ID number, and so it could go r1,r2,r3,r5,r7,r90 I guess.

 

[KevinM1]

Sadly no!

 

the r"some number" is actaully a DB ID number, and so it could go r1,r2,r3,r5,r7,r90 I guess.

 

 

Hmm...well, you could always go the longer route of setting each area element's onmouseover event:

var area1 = document.getElementById("area1");
area1.mouseover = function()
{
   var r1 = document.getElementById("r1");
   r1.style.display = "block";
}

area1.onmouseout = function()
{
   var r1 = document.getElementById("r1");
   r1.style.display = "none";
}

 

You'd have to do give each area element an id, so you can obtain them individually.  Then you'd need to manually assign the proper functions to the mouse event handlers.  Tedious, but it can be done.

 

It can still be done if you're pulling data from the DB.  You'd just have to write the JavaScript using PHP, or whatever server-side language you're using.

[scotchegg78]

thanks nightsly i am going to take a lok at this now, only issue i still see is that i need them not to hide on mouse / hover out.

instead when a new one is hovered over i replaces the previous one. and the previous is hiden

[KevinM1]

thanks nightsly i am going to take a lok at this now, only issue i still see is that i need them not to hide on mouse / hover out.

instead when a new one is hovered over i replaces the previous one. and the previous is hiden

 

Okay, that shouldn't be hard, provided you keep track of the previous displayed div.  The easiest/best way to do that would be to set a global variable that keeps that info:

<script type="text/javascript">
   window.onload = function()
   {
      var prev = null; //previous div that's been displayed...since this is the beginning of the script, it's null
      .
      .
      .
      var areaElem = document.getElementById("area1");

      areaElem.onmouseover = function() //toggle function
      {
         if(prev.id == "some value")
         {
            prev = myDiv; //once you start switching the displayed divs around, you should store the old ones as reference
            var myDiv = document.getElementById("r12"); //get the new div.  Note that it's not global...that saves some headaches down the road
            
            prev.style.display = "none"; //hide the old div
            myDiv.style.display = "block"; //show the new one
         }
      }
      .
      .
      .
   }
</script>

 

Obviously, there's more to it than that, but that's the gist of it.