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
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question detect mouseover and mouseout & show coordinates

    This is what my code is supposed to do:

    1. create a select list that changes the photo showing, (which I have)
    2. create script so that when the user hovers over the image it shows a div
    3. when the users mouse is off the image/div shows the coordinates where it last left
    4. on mouseout hides the div again (this is the part I'm stuck on)

    This is my html:
    Code:
    <style>
    		#selectdiv
    		{
    			position:absolute;
    			left:10px;
    			top:10px;
    			width:400px;
    			height:400px;
    		}
    		#mylist
    		{
    			position: absolute;
    			left: 200px;
    			top: 100px;
    			width:inherit;
    			height:inherit;
    		}
    		#myyellow
    		{
    			position: absolute;
    			left: 600px;
    			top: 100px;
    			width:300px;
    			height:200px;
    			background-color:#FF3;
    		}
    	</style>
    <body>
    	  <div id="selectdiv">
          <h1 style="font-size:28px">Select a Beatle</h1>
          <select name="beatles" size="1" id="myselect" onchange="showDiv();">
    	  		<option value="-">-</option>
                <option value="J">John</option>
                <option value="P">Paul</option>
                <option value="G">George</option>
                <option value="R">Ringo</option>
          </select>
          </div>
          <div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
          <div id="John" style="display:none">
          	<img src="beatles_john.jpg" />
          </div>
          <div id="Paul" style="display:none">
          	<img src="beatles_paul.jpg"  />
          </div>
          <div id="George" style="display:none">
          	<img src="beatles_george.jpg" />
          </div>
          <div id="Ringo" style="display:none">
          	<img src="beatles_ringo.jpg" />
          </div>
    	  <div id="myyellow" style="display:none"></div>
          <div id="msg"></div>
    </body>
    This is my script:
    Code:
    function showDiv()
    		{
    			var mySelect = document.getElementById("myselect");
    			var myList = document.getElementById("mylist");
    			
    			switch (mySelect.value)
    			{
    				case 'J':
    						myDiv = document.getElementById("John");
    						myList.innerHTML = myDiv.innerHTML;
    						myList.style.display = "block"; 		//Makes div viewable
    						break;
    						
    				case 'P':
    						myDiv = document.getElementById("Paul");
    						myList.innerHTML = myDiv.innerHTML;
    						myList.style.display = "block";			//Makes div viewable
    						break;
    						
    						
    				case 'G':
    						myDiv = document.getElementById("George");
    						myList.innerHTML = myDiv.innerHTML;
    						myList.style.display = "block";			//Makes div viewable
    						break;
    						
    						
    				case 'R':
    						myDiv = document.getElementById("Ringo");
    						myList.innerHTML = myDiv.innerHTML;
    						myList.style.display = "block";			//Makes div viewable
    						break;
    			}
    		}
    		
    		function showYellow(event)
    		{
    			var myyellow = document.getElementById("myyellow");
    			myyellow.style.display = "block";
    			
    		}
    		function showpixels(event)
    		{
    		 	x=event.clientX
    			y=event.clientY
    
    			var myMsg = document.getElementById("msg");
    			myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
    		}
    Any feed back is greatly appreciated.
    Last edited by javastudent; 12-06-2010 at 11:11 PM.

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Nevermind, I figured it out.


  •  

    Posting Permissions

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