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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    javascript onclick/mouseover/etc show or hide div

    Hi...

    I'm looking at an old pet project from when I was learning some coding at a basic level. Not that I'm much better. But I'd like to simplify and finish this project.

    I have three functions, that are called in each entry of a dropdown menu (created by a <ul> list). The idea, is that a different image is shown for each item when they roll over the choice (ShowContent), If they roll off, the image dissappears unless it's been clicked(HideContent). They then click one item, and that image stays visible(PickContent). I didn't solve this last part back then, and thought I'd get your thoughts.

    Right now, the images will show on mouseover, but the images don't disappear when I mouse off, and the click function doesn't work. At the moment I'm trying to figure out how to simplify it into one function in jquery using hover(). But, first I couldn't get what I've got to work.

    The functions are broken out:
    Code:
    function HideContent(d) {
    if(d.length < 1) { return; }
      if(!(document.getElementById(d).className = "chosen")) {
        document.getElementById(d).style.display = "none";
      }
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    // if(!(document.getElementById(d).className == "chosen")) {
    document.getElementById(d).style.display = "block";
    // document.getElementById(d).className = "chosen";
    // }
    }
    
    function PickContent(d) {
    if(d.length < 1) { return; }
     if(!(document.getElementById(d).className == "chosen")) {
    document.getElementById(d).style.display = "block";
     document.getElementById(d).className = "chosen";
     }
    }

    The html is a <ul> with several items -generated by php that look like this:

    PHP Code:

    <ul>
    <
    li onclick="PickContent('uniqueleaf');" onmouseover="ShowContent('uniqueleaf'); HideContent('uniqueleaf');
     " 
    onmouseleave="HideContent('uniqueleaf');"  value="1"><a href="#">
          
    option1
        
    </a></li>

    <
    li onclick="PickContent('uniqueleaf');" onmouseover="ShowContent('uniqueleaf'); HideContent('uniqueleaf');
     " 
    onmouseleave="HideContent('uniqueleaf');"  value="2"><a href="#">
          
    option2
    </a></li>
    <!-- and 
    so on -->
    </
    ul>

    The image that gets replaced

     
    <div id="uniqueleaf" style="display:none; z-index:2; background-color: transparent; ">
          <
    IMG SRC="images/leaf_shapes/23/leaf_transparent.png" name="pic2" width="250" height="350" border="0">
        </
    div
    hopefully that's enough information.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Part of the problem is using
    Code:
    onmouseleave="HideContent('uniqueleaf');"
    onmouseleave is wrong. You needed to use onmouseout.

    The next hurdle is; you need to disable the onmouseover/onmouseout functions when you click and have a permanent image.

    I used a single permanent image, but using a switch like the ShowContent() function has can increase the number used. I put the li's in divs to get a separation and see the mouse control. These are my image name, change to what you want. I leave the jquery up to you. If you need help with that ask.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Page</title>
    <script type="text/javascript">
    var paste = "no";
    function HideContent() {
    	if(paste == "no") {	
    		document.getElementById("uniqueleaf").src = "";
    	}
    }
    
    function ShowContent(d) {
    if(paste == "no") {	
    	 switch (d){
    	 	case 1:
    			pic = "images/6.png";
    			break;
    		case 2:
    			pic = "images/2.png";
    			break;
    		default:
    			alert("The Switch Failed!");
    	 }
    	 document.getElementById("uniqueleaf").src = pic;
    	}
    }
    
    function PickContent() {
     document.getElementById("uniqueleaf").src = "images/3.png";
     paste = "yes";
    }
    </script>
    </head>
    
    <body>
    <ul>
    <div style="height:35px;">
    <li onclick="PickContent();" onmouseover="ShowContent(1);" onmouseout = "HideContent();"  value="1">
    <a href="#">option1</a>
    </li>
    </div>
    <div style="height:35px;">
    <li onclick="PickContent();" onmouseover="ShowContent(2);" onmouseout = "HideContent();" value="2">
    <a href="#">option2</a>
    </li>
    </div>
    </ul>
    
    The image that gets replaced
    	
    <div>
    	<img id="uniqueleaf" src="" width="250" height="350">
    </div>  
    	
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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