onmouseover: not working!

[monkeysniffer08]

ok, so I am coding a site but am getting very frustrated.
http://patrickmauldin.com/testingser...law/index.html

I have a "sidemenu" to display the various services of a law office. On hovering over each one, it should switch images to the hover state. On clicking, it should make the hover state permanent and display the relevant info on the right (ex: click 'health care' -> health care info displays and all others hidden)

In order to do this, I have created several onclick and onmouseover states.

Everything is working great except for one stupid menu item — "mediation." I have torn my hair out trying to figure out what makes this one not work. When clicked, it displays the correct info on the right, but doesn't do the hover state, or the permanent hover state when clicked.

Here is the relevant code snippet:

<div id="menu"> 
  
<div id="finance" style="display:block">
<img src="images/menu/finance.jpg" alt="Finance" name="finance" width="181" height="78" id="finance" onclick="MM_changeProp('infofinance','','display','block','DIV');MM_changeProp('infohealth','','display','none','DIV');MM_changeProp('infoenergy','','display','none','DIV');MM_changeProp('infointellectual','','display','none','DIV');MM_changeProp('infogov','','display','none','DIV');MM_changeProp('infomediation','','display','none','DIV');MM_changeProp('healthcare','','display','block','DIV');MM_changeProp('healthcare_selected','','display','none','DIV');MM_changeProp('finance','','display','none','DIV');MM_changeProp('finance_selected','','display','block','DIV');MM_changeProp('energy','','display','block','DIV');MM_changeProp('energy_selected','','display','none','DIV');MM_changeProp('intellectual','','display','block','DIV');MM_changeProp('intellectual_selected','','display','none','DIV');MM_changeProp('gov','','display','block','DIV');MM_changeProp('gov_selected','','display','none','DIV');MM_changeProp('mediation','','display','block','DIV');MM_changeProp('mediation_selected','','display','none','DIV')" onmouseover="MM_swapImage('finance','','images/menu/finance_select.jpg',1)" onmouseout="MM_swapImgRestore()"/>
</div>
<div id="finance_selected" style="display:none">
<img src="images/menu/finance_select.jpg" alt="Finance" name="finance_selected" id="finance_selected" width="181" height="78"/>
</div>
    
<div id="healthcare" style="display:block">
<img src="images/menu/healthcare.jpg" alt="Health Care" name="health" width="181" height="51" id="health" onclick="MM_changeProp('infofinance','','display','none','DIV');MM_changeProp('infohealth','','display','block','DIV');MM_changeProp('infoenergy','','display','none','DIV');MM_changeProp('infointellectual','','display','none','DIV');MM_changeProp('infogov','','display','none','DIV');MM_changeProp('infomediation','','display','none','DIV');MM_changeProp('healthcare','','display','none','DIV');MM_changeProp('healthcare_selected','','display','block','DIV');MM_changeProp('finance','','display','block','DIV');MM_changeProp('finance_selected','','display','none','DIV');MM_changeProp('energy','','display','block','DIV');MM_changeProp('energy_selected','','display','none','DIV');MM_changeProp('intellectual','','display','block','DIV');MM_changeProp('intellectual_selected','','display','none','DIV');MM_changeProp('gov','','display','block','DIV');MM_changeProp('gov_selected','','display','none','DIV');MM_changeProp('mediation','','display','block','DIV');MM_changeProp('mediation_selected','','display','none','DIV')" onmouseover="MM_swapImage('health','','images/menu/healthcare_select.jpg',1)" onmouseout="MM_swapImgRestore()"/>
</div>
<div id="healthcare_selected" style="display:none">
<img src="images/menu/healthcare_select.jpg" alt="Health Care" name="health_selected" id="health_selected" width="181" height="51"/>
</div>

<div id="energy" style="display:block">
<img src="images/menu/energy.jpg" alt="Energy Litigation" name="energy" width="181" height="51" id="energy" onclick="MM_changeProp('infofinance','','display','none','DIV');MM_changeProp('infohealth','','display','none','DIV');MM_changeProp('infoenergy','','display','block','DIV');MM_changeProp('infointellectual','','display','none','DIV');MM_changeProp('infogov','','display','none','DIV');MM_changeProp('infomediation','','display','none','DIV');MM_changeProp('healthcare','','display','block','DIV');MM_changeProp('healthcare_selected','','display','none','DIV');MM_changeProp('finance','','display','block','DIV');MM_changeProp('finance_selected','','display','none','DIV');MM_changeProp('energy','','display','none','DIV');MM_changeProp('energy_selected','','display','block','DIV');MM_changeProp('intellectual','','display','block','DIV');MM_changeProp('intellectual_selected','','display','none','DIV');MM_changeProp('gov','','display','block','DIV');MM_changeProp('gov_selected','','display','none','DIV');MM_changeProp('mediation','','display','block','DIV');MM_changeProp('mediation_selected','','display','none','DIV')" onmouseover="MM_swapImage('energy','','images/menu/energy_select.jpg',1)" onmouseout="MM_swapImgRestore()" />
</div>
<div id="energy_selected" style="display:none">
<img src="images/menu/energy_select.jpg" width="181" height="51" alt="Energy Litigation" />
</div>

<div id="intellectual" style="display:block">
 <img src="images/menu/intellectual.jpg" alt="Intellectual Property Litigation" name="intellectual" width="181" height="51" id="intellectual" onclick="MM_changeProp('infofinance','','display','none','DIV');MM_changeProp('infohealth','','display','none','DIV');MM_changeProp('infoenergy','','display','none','DIV');MM_changeProp('infointellectual','','display','block','DIV');MM_changeProp('infogov','','display','none','DIV');MM_changeProp('infomediation','','display','none','DIV');MM_changeProp('healthcare','','display','block','DIV');MM_changeProp('healthcare_selected','','display','none','DIV');MM_changeProp('finance','','display','block','DIV');MM_changeProp('finance_selected','','display','none','DIV');MM_changeProp('energy','','display','block','DIV');MM_changeProp('energy_selected','','display','none','DIV');MM_changeProp('intellectual','','display','none','DIV');MM_changeProp('intellectual_selected','','display','block','DIV');MM_changeProp('gov','','display','block','DIV');MM_changeProp('gov_selected','','display','none','DIV');MM_changeProp('mediation','','display','block','DIV');MM_changeProp('mediation_selected','','display','none','DIV')" onmouseover="MM_swapImage('intellectual','','images/menu/intellectual_select.jpg',1)" onmouseout="MM_swapImgRestore()" />
 </div>
 <div id="intellectual_selected" style="display:none">
 <img src="images/menu/intellectual_select.jpg" width="181" height="51" alt="Intellectual Litigation" />
 </div>
 
 <div id="gov" style="display:block">
  <img src="images/menu/gov.jpg" alt="Governmental Work" name="gov" width="181" height="51" id="gov" onclick="MM_changeProp('infofinance','','display','none','DIV');MM_changeProp('infohealth','','display','none','DIV');MM_changeProp('infoenergy','','display','none','DIV');MM_changeProp('infointellectual','','display','none','DIV');MM_changeProp('infogov','','display','block','DIV');MM_changeProp('infomediation','','display','none','DIV');MM_changeProp('healthcare','','display','block','DIV');MM_changeProp('healthcare_selected','','display','none','DIV');MM_changeProp('finance','','display','block','DIV');MM_changeProp('finance_selected','','display','none','DIV');MM_changeProp('energy','','display','block','DIV');MM_changeProp('energy_selected','','display','none','DIV');MM_changeProp('intellectual','','display','block','DIV');MM_changeProp('intellectual_selected','','display','none','DIV');MM_changeProp('gov','','display','none','DIV');MM_changeProp('gov_selected','','display','block','DIV');MM_changeProp('mediation','','display','block','DIV');MM_changeProp('mediation_selected','','display','none','DIV')" onmouseover="MM_swapImage('gov','','images/menu/gov_select.jpg',1)" onmouseout="MM_swapImgRestore()" />
  </div>
  <div id="gov_selected" style="display:none">
  <img src="images/menu/gov_select.jpg" width="181" height="51" alt="Governmental Work" />
 </div>
 
<div id="mediation" style="display:block">
  <img src="images/menu/mediation.jpg" alt="Mediation" name="mediation" width="181" height="83" id="mediation" onclick="MM_changeProp('infofinance','','display','none','DIV');MM_changeProp('infohealth','','display','none','DIV');MM_changeProp('infoenergy','','display','none','DIV');MM_changeProp('infointellectual','','display','none','DIV');MM_changeProp('infogov','','display','none','DIV');MM_changeProp('infomediation','','display','block','DIV');MM_changeProp('healthcare','','display','block','DIV');MM_changeProp('healthcare_selected','','display','none','DIV');MM_changeProp('finance','','display','block','DIV');MM_changeProp('finance_selected','','display','none','DIV');MM_changeProp('energy','','display','block','DIV');MM_changeProp('energy_selected','','display','none','DIV');MM_changeProp('intellectual','','display','block','DIV');MM_changeProp('intellectual_selected','','display','none','DIV');MM_changeProp('gov','','display','block','DIV');MM_changeProp('gov_selected','','display','none','DIV');MM_changeProp('mediation','','display','none','DIV');MM_changeProp('mediation_selected','','display','block','DIV')" onmouseover="MM_swapImage('mediation','','images/menu/mediation_select.jpg',1)" onmouseout="MM_swapImgRestore()" />
  </div>
  <div id="mediation_selected" style="display:none">
  <img src="images/menu/mediation_select.jpg" width="181" height="83" alt="Mediation" />
 </div>
    
    <!-- end MENU --></div>

[monkeysniffer08]

Just in case anyone is curious...... I originally was planning on making each one a separate html file, but realized that this would mean that whenever someone clicked a menu link, the new page would load at the top and you have would have to scroll down. Not very nice.

Also, if anyone has a suggestion for a much simpler way to achieve this same effect, PLEASE do not hesitate to post it!

[xelawho]

from what it looks like to me, you have saved the same image twice under different names. have a look at
http://patrickmauldin.com/testingser.../mediation.jpg
compared to
http://patrickmauldin.com/testingser...ion_select.jpg

and
http://patrickmauldin.com/testingser...s/menu/gov.jpg
compared to
http://patrickmauldin.com/testingser...gov_select.jpg

see what I mean?

and by the by, that's way too much unreadable javascript for what you're trying to do...below is my stab at your menu, just for kicks (I'm sure most people here could do better)...

<!DOCTYPE html>
<html>
  <head>
  <title>blank</title>
    <meta charset="UTF-8">
</head>
<style>
.info{
display:none;
}
</style>
<body>
<div style="float:left; width:20%; line-height:0px">
<div><img src="http://patrickmauldin.com/testingserver/downtonlaw/images/menu/finance.jpg" onclick="showDiv('finance')" onMouseOver="this.src=image2.src" onMouseOut="this.src=image1.src"></img></div>
<div><img src="http://patrickmauldin.com/testingserver/downtonlaw/images/menu/healthcare.jpg" onclick="showDiv('health')"onMouseOver="this.src=image4.src" onMouseOut="this.src=image3.src"></img></div>
<div><img src="http://patrickmauldin.com/testingserver/downtonlaw/images/menu/energy.jpg" onclick="showDiv('energy')" onMouseOver="this.src=image6.src" onMouseOut="this.src=image5.src"></img></div>
<div><img src="http://patrickmauldin.com/testingserver/downtonlaw/images/menu/intellectual.jpg" onclick="showDiv('intel')" onMouseOver="this.src=image8.src" onMouseOut="this.src=image7.src"></img></div>
<div><img src="http://patrickmauldin.com/testingserver/downtonlaw/images/menu/gov.jpg" onclick="showDiv('gov')" onMouseOver="this.src=image10.src" onMouseOut="this.src=image9.src"></img></div>
<div><img src="http://patrickmauldin.com/testingserver/downtonlaw/images/menu/mediation.jpg" onclick="showDiv('med')" onMouseOver="this.src=image12.src" onMouseOut="this.src=image11.src"></img></div>
</div>
<div style="float:right; width:80%">
<div id="finance" class="info">Finance</div>
<div id="health" class="info">Healthcare</div>
<div id="energy" class="info">Energy</div>
<div id="intel" class="info">Intellectual</div>
<div id="gov" class="info">Government</div>
<div id="med" class="info">Mediation</div>
</div>
<script type="text/javascript">
var shownDiv;
URL ="http://patrickmauldin.com/testingserver/downtonlaw/images/menu/"
image1 = new Image; 
image2 = new Image;
image3 = new Image ;
image4 = new Image;
image5 = new Image; 
image6 = new Image;
image7 = new Image; 
image8 = new Image;
image9 = new Image; 
image10 = new Image;
image11 = new Image; 
image12 = new Image; 
image1.src = URL+'finance.jpg'; 
image2.src = URL+'finance_select.jpg';
image3.src = URL+'healthcare.jpg'; 
image4.src = URL+'healthcare_select.jpg';
image5.src = URL+'energy.jpg'; 
image6.src = URL+'energy_select.jpg'; 
image7.src = URL+'intellectual.jpg'; 
image8.src = URL+'intellectual_select.jpg';
image9.src = URL+'gov.jpg'; 
image10.src = URL+'gov_select.jpg';
image11.src = URL+'mediation.jpg'; 
image12.src = URL+'mediation_select.jpg';

function showDiv(divname) {
if (shownDiv) {
document.getElementById(shownDiv).style.display="none"
}
document.getElementById(divname).style.display="block";
shownDiv=divname;
}
</script>
</body>
</html>

[monkeysniffer08]

Thanks Xelawho.... I didn't even realize that. It should have been the first thing to check. lol

I'll try out your javascript too.

[monkeysniffer08]

I used your javascript fix, but any idea why there are a few pixels of white space in between each image?

[xelawho]

Originally Posted by monkeysniffer08

any idea why there are a few pixels of white space in between each image?

ah, yeah - that's 'cause I just belted it out thinking that you're about to get shown 20 better ways to do this. But in the meantime you can change the line height on the div that wraps the images:
<div style="float:left; width:20%; line-height:0px">