Jump to content

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


scotchegg78

Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.