Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with my mouseover swap & dropdown menu

    I was trying to modify two different scripts into one, to accomplish this:

    1) Image swap when user rolls over
    2) Drop down a menu when user rolls over

    The javascript in the header (unaltered) for the menu dropdown is:
    Code:
    <!-- dd menu -->
    <script type="text/javascript">
    <!--
    var timeout         = 500;
    var closetimer		= 0;
    var ddmenuitem      = 0;
    
    // open hidden layer
    function mopen(id)
    {	
    	// cancel close timer
    	mcancelclosetime();
    
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
    
    }
    // close showed layer
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
    
    // go close timer
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
    
    // cancel close timer
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
    
    // close layer when click-out
    document.onclick = mclose; 
    // -->
    </script>
    
    <style type="text/css">
    #sddm
    {	margin: 0;
    	padding: 0;
    	z-index: 0}
    
    #sddm li
    {	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: left;
    	font: bold 11px arial}
    
    #sddm li a
    {	display: block;
    	margin: 0 1px 0 0;
    	padding: 0px 00px;
    	width: 00px;
    	background: #5970B2;
    	color: #FFF;
    	text-align: center;
    	text-decoration: none}
    
    #sddm li a:hover
    {	background: #808040}
    
    #sddm div
    {	position: absolute;
    	visibility: hidden;
    	margin: 0;
    	padding: 0;
    	background: #EAEBD8;
    	border: 1px solid #5970B2}
    
    	#sddm div a
    	{	position: relative;
    		display: block;
    		margin: 0;
    		padding: 5px 10px;
    		width: auto;
    		white-space: nowrap;
    		text-align: left;
    		text-decoration: none;
    		background: #EAEBD8;
    		color: #808040;
    		font: 11px arial}
    
    	#sddm div a:hover
    	{	background: #808040;
    		color: #FFF}
    
    </style>
    The js in the head for the rollover swap is:
    Code:
    <script type="text/javascript"> <!-- function roll(img_name, img_src) { document[img_name].src = img_src; } //--> </script>
    Now, I altered the code in the body to combine the two.

    Here is the original version that worked (to dropdown the menu):

    Code:
    <ul id="sddm">
    	<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()"><img src="about1.gif" border="0"></a>
    		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    <a href="test.html">Test</a>		
    <a href="test2.html">Test2</a>
    		</div>
    	</li>
    	
    </ul>
    <div style="clear:both"></div>
    Here is the code for the rollover swap (unaltered), which works fine on its own:
    Code:
    <a href="#" 
    onmouseover="roll('sub_but', about2.gif')" 
    onmouseout="roll('sub_but', 'about1.gif')">
    
    <img src="about1.gif" width="143" height="39" border="0" 
    alt="Move your mouse over me" name="sub_but" />
    
    </a>

    Here's what I altered it to, which is not working (in red what I added:
    Code:
    <ul id="sddm">
    	<li><a href="#" onmouseover="mopen('m1'), roll('sub_but', 'about2.gif')" onmouseout="mclosetime(), roll('sub_but', 'about1.gif')"><img src="about1.gif" border="0" name="sub_but"></a>
    		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    <a href="test.html">Test</a>		
    <a href="test2.html">Test2</a>
    		</div>
    	</li>
    	
    </ul>
    <div style="clear:both"></div>
    I'd REALLY appreciate any advice someone could lend with what I'm doing wrong.

    Thanks!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Without even looking at anything else, you need to fix this:

    Code:
    onmouseover="mopen('m1'), roll('sub_but', 'about2.gif')"
    Each of those is a statement, and JS statements are semi-colon, not comma-, separated.

  • #3
    New Coder
    Join Date
    Jun 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops. Thanks for pointing that out, I changed that. But still not working for some reason. I know it's something stupid I'm missing.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    More than likely, you are getting an error in that call to mopen('m1') and when you get an error, JavaScript just stops executing. So then your call to [b]roll( )]/b] is never reached.

    To see if I'm right, swap the order of the two calls:
    Code:
    onmouseover="roll('sub_but', 'about2.gif'); mopen('m1');"
    Now, if the roll( ) works but not the mopen, then you know I'm right.

    So time to turn on JavaScript debugging and track down what's going wrong.

    But I have to tell you that I tried your code *UNALTERED* (except to get rid of the nonsense <!-- and --> crap) and it worked first time.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •