VaporAction Posted January 16, 2007 Share Posted January 16, 2007 I'm new to javascript so my code is probably all messed up...anyway, here goes...I'm trying to make a drop down menu composed of images using javascript...I tried making function that would be triggered by onMouseOver and onMouseOut events...I know how to make it happen if I use a different function for each menu item...but for efficiency I tried writing the function so that it would know which menu item had called it and display the appropriate image...just for testing purposes, I'm only using 2 menu items right now...they're images with the id "topChem" and "topMin""topChem" when moused over should display "botChem""topMin" when moused over should display "botMin"here's the code that hasn't been working... function menuOver() { var source = window.event.srcElement; if (source=="topChem") { document.getElementById("botChem").style.visibility = "visible"; } else if (source=="topMin") { document.getElementById("botMin").style.visibility = "visible"; }}function menuOut() { var source = window.event.srcElement; if (source=="topChem") { document.getElementById("botChem").style.visibility = "hidden"; } else if (source=="topMin") { document.getElementById("botMin").style.visibility = "hidden"; }} Link to comment Share on other sites More sharing options...
pulpfiction Posted January 16, 2007 Share Posted January 16, 2007 Try this code, changes in bold...function menuOver() { var source = window.event.srcElement; if (source.id=="topChem") { document.getElementById("botChem").style.visibility = "visible"; } else if (source.id=="topMin") { document.getElementById("botMin").style.visibility = "visible"; }}function menuOut() { var source = window.event.srcElement; if (source.id=="topChem") { document.getElementById("botChem").style.visibility = "hidden"; } else if (source.id=="topMin") { document.getElementById("botMin").style.visibility = "hidden"; }} Link to comment Share on other sites More sharing options...
VaporAction Posted January 16, 2007 Author Share Posted January 16, 2007 Try this code, changes in bold...function menuOver() { var source = window.event.srcElement; if (source.id=="topChem") { document.getElementById("botChem").style.visibility = "visible"; } else if (source.id=="topMin") { document.getElementById("botMin").style.visibility = "visible"; }}function menuOut() { var source = window.event.srcElement; if (source.id=="topChem") { document.getElementById("botChem").style.visibility = "hidden"; } else if (source.id=="topMin") { document.getElementById("botMin").style.visibility = "hidden"; }}nope, still doesn't work... Link to comment Share on other sites More sharing options...
pulpfiction Posted January 16, 2007 Share Posted January 16, 2007 I tried the above code with buttons and they work fine... may be we need to check the HTML part. Can you post the HTML code?? Link to comment Share on other sites More sharing options...
VaporAction Posted January 16, 2007 Author Share Posted January 16, 2007 I tried the above code with buttons and they work fine... may be we need to check the HTML part. Can you post the HTML code??here's the html...<html><head> <link rel="stylesheet" href="../../../css/global.css"> <script src="../../../scripts/global.js"></script></head><body><a id="topChem" href="#" onMouseOver="menuOver()" onMouseOut="menuOut()"><img src="../../../images/btnChem.gif"></a><img id="botChem" src="../../../images/btnChem.gif"><a id="topMin" href="#" onMouseOver="menuOver()" onMouseOut="menuOut()"><img src="../../../images/btnMin.gif"></a><img id="botMin" src="../../../images/btnMin.gif"></body></html> Link to comment Share on other sites More sharing options...
jesh Posted January 17, 2007 Share Posted January 17, 2007 Try the following.Add "event" to the HTML: <a id="topMin" href="#" onMouseOver="menuOver(event)" onMouseOut="menuOut(event)"> And change your javascript to: function menuOver(e){ e = (e) ? e : window.event; var source = (e.target) ? e.target : e.srcElement; ...}function menuOut(e){ e = (e) ? e : window.event; var source = (e.target) ? e.target : e.srcElement; ...} Link to comment Share on other sites More sharing options...
aspnetguy Posted January 17, 2007 Share Posted January 17, 2007 window.event.srcElement; only works in ie, do what jesh suggests Link to comment Share on other sites More sharing options...
VaporAction Posted January 18, 2007 Author Share Posted January 18, 2007 window.event.srcElement; only works in ie, do what jesh suggestsI tried Jesh's code...function menuOver(e){ e = (e) ? e : window.event; var source = (e.target) ? e.target : e.srcElement; if (source=="topChem") { document.getElementById("botChem").style.visibility = "visible"; } else if (source=="topMin") { document.getElementById("botMin").style.visibility = "visible"; }} and added (event) to the onMouseOver in the html...but it still didn't work...could you guys double check my code...I wasn't sure if I was supposed to add some of the other people's suggestions... Link to comment Share on other sites More sharing options...
jesh Posted January 18, 2007 Share Posted January 18, 2007 Now you just have to do what pulpfiction suggested in the first post. Rather than: if (source=="topChem") { Try: if (source.id=="topChem") { This is because source is the DOM element for the link and you want to compare the id of that element to "topChem" rather than the element itself. Link to comment Share on other sites More sharing options...
VaporAction Posted January 18, 2007 Author Share Posted January 18, 2007 still not working...here's the code again in case I messed up somewhere...html: <p><a id="topChem" href="#" onMouseOver="menuOver(e)">topChem</a> <a id="topMin" href="#" onMouseOver="menuOver(e)">topMin</a></p> <p><a id="botChem">botChem</a> <a id="botMin">botMin</a></p> java script: function menuOver(e){ e = (e) ? e : window.event; var source = (e.target) ? e.target : e.srcElement; if (source.id=="topChem") { document.getElementById("botChem").style.visibility = "visible"; } else if (source.id=="topMin") { document.getElementById("botMin").style.visibility = "visible"; }} I also tried it with menuOver(event) instead of menuOver(e) since that was the original suggestion but then figured since e was being used instead in the function I should stick with e ...but either way didn't work... Link to comment Share on other sites More sharing options...
pulpfiction Posted January 18, 2007 Share Posted January 18, 2007 This should work fine... In the HTML part, change menuOver(e) to menuOver(event). In this code Intiially "botChem" and "botMin" are hidden and when you move the mouse over "topChem" or "topMin" then they will appear and will be hidden when mouse out of link.... function menuOver(e){ e = (e) ? e : window.event; var source = (e.target) ? e.target : e.srcElement; if (source.id=="topChem") { document.getElementById("botChem").style.visibility = "visible"; } else if (source.id=="topMin") { document.getElementById("botMin").style.visibility = "visible"; }}function menuOut(e){ e = (e) ? e : window.event; var source = (e.target) ? e.target : e.srcElement; if (source.id=="topChem") { document.getElementById("botChem").style.visibility = "hidden"; } else if (source.id=="topMin") { document.getElementById("botMin").style.visibility = "hidden"; }} HTML <body><p><a id="topChem" href="#" onMouseOut="menuOut(event)" onMouseOver="menuOver(event)">topChem</a><a id="topMin" href="#" onMouseOut="menuOut(event)" onMouseOver="menuOver(event)">topMin</a></p><p><a href="#" id="botChem" style="visibility:hidden;">botChem</a> <a href="#" id="botMin" style="visibility:hidden;">botMin</a></p</body> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now