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 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry onmouseover: not working!

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

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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)...

    Code:
    <!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>
    Last edited by xelawho; 09-24-2011 at 02:17 PM. Reason: remove gaps between images

  • Users who have thanked xelawho for this post:

    monkeysniffer08 (09-24-2011)

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I used your javascript fix, but any idea why there are a few pixels of white space in between each image?

    Last edited by monkeysniffer08; 09-24-2011 at 07:57 AM.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote 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">


  •  

    Tags for this Thread

    Posting Permissions

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