scotchegg78 Posted June 5, 2008 Share Posted June 5, 2008 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! Quote Link to comment Share on other sites More sharing options...
sstalder Posted June 5, 2008 Share Posted June 5, 2008 Your function is named "showhide" and your calling "show". Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted June 5, 2008 Share Posted June 5, 2008 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. Quote Link to comment Share on other sites More sharing options...
scotchegg78 Posted June 5, 2008 Author Share Posted June 5, 2008 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? Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted June 6, 2008 Share Posted June 6, 2008 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? Quote Link to comment Share on other sites More sharing options...
scotchegg78 Posted June 7, 2008 Author Share Posted June 7, 2008 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. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted June 7, 2008 Share Posted June 7, 2008 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. Quote Link to comment Share on other sites More sharing options...
scotchegg78 Posted June 9, 2008 Author Share Posted June 9, 2008 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 Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted June 9, 2008 Share Posted June 9, 2008 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.