View Full Version : Problem with my mouseover swap & dropdown menu

05-18-2009, 07:43 PM
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:

<!-- dd menu -->
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
// cancel close timer

// 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()
closetimer = null;

// close layer when click-out
document.onclick = mclose;
// -->

<style type="text/css">
{ 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}


The js in the head for the rollover swap is:

<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):

<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 style="clear:both"></div>

Here is the code for the rollover swap (unaltered), which works fine on its own:

<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" />


Here's what I altered it to, which is not working (in red what I added:

<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 style="clear:both"></div>

I'd REALLY appreciate any advice someone could lend with what I'm doing wrong.


05-18-2009, 07:49 PM
Without even looking at anything else, you need to fix this:

onmouseover="mopen('m1'), roll('sub_but', 'about2.gif')"

Each of those is a statement (http://jennifermadden.com/javascript/statements.html), and JS statements are semi-colon, not comma-, separated.

05-18-2009, 08:07 PM
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.

Old Pedant
05-19-2009, 03:06 AM
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:

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.