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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts

    onmouseover & getElementById; am I doing it right?

    I am trying to alter Playa to use input type images instead of buttons. Part of this involves the need for a rollover image eg. a play button highlights when the cursor is over it. This is the code I have:
    Code:
    if (Playa.btnState == "Stop") {
    document.getElementById("btnPlayStop").onmouseover = "this.src='images/stophover.gif'"
    document.getElementById("btnPlayStop").onmouseout = "this.src='images/stop.gif'";
    }
    else {
    document.getElementById("btnPlayStop").onmouseover = "this.src='images/playhover.gif'";
    document.getElementById("btnPlayStop").onmouseout = "this.src='images/play.gif'";
    }
    
    
    <input type="image" src="images/stop.gif" onmouseover="this.src='images/stophover.gif'" onmouseout="this.src='images/stop.gif'" alt="Stop" id="btnPlayStop" onclick="Playa.doPlayStop();" />
    Playa.btnState is the alt tag to say whether the state is stopped or started. I have the code working to alternate between "Play" and "Stop" images when the button is clicked, but the rollover doesn't happen.

    Any ideas?
    Thanks

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Try this:
    Code:
    if (Playa.btnState == "Stop") {
    document.getElementById("btnPlayStop").onmouseover = function() {this.src='images/stophover.gif'};
    document.getElementById("btnPlayStop").onmouseout = function() {this.src='images/stop.gif'};
    }
    else {
    document.getElementById("btnPlayStop").onmouseover = function() {this.src='images/playhover.gif'};
    document.getElementById("btnPlayStop").onmouseout = function() {this.src='images/play.gif'};
    }
    Note that in this case the onmouseout and onmouseover attributes should contain a function reference, not a string.
    I am still learning English

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the reply, I worked it out another way, but I will give yours a try too.

    This is what works for me:
    Code:
    //	Rollover functions for Start/Stop
    	
    		function mouseOn() {
    			if (Playa.btnState == "Stop") {
    				document.getElementById("btnPlayStop").src = "images/stophover.gif";
    			}
    			else {
    				document.getElementById("btnPlayStop").src = "images/playhover.gif";
    			}
    		}
    		function mouseOff() {
    			if (Playa.btnState == "Stop") {
    				document.getElementById("btnPlayStop").src = "images/stop.gif";
    			}
    			else {
    				document.getElementById("btnPlayStop").src = "images/play.gif";
    			}
    		}
    With onmouseover="mouseOn();" onmouseout="mouseOff(); in the html

    Thanks again


  •  

    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
    •