www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript Rollover question

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    Post Javascript Rollover question

    Need help disabling rollovers while in a clicked state. Javascript is not my strong point - I have found help on this site which brought me to the following code - all works well. But I can't seem to disable the rollover when the button is clicked.


    My HTML code is -
    Code:
    <a href="#"><img src="images/button1_off.png" width="175" height="70" border="0" alt="button1" id="button1" /></a>

    Here is my external JS script.

    Code:
    window.onload = rolloverInit;
    
    function rolloverInit() {
    	for (var i=0; i<document.images.length; i++) {
    		if (document.images[i].parentNode.tagName == "A") {
    			setupRollover(document.images[i]);
    		}
    	}
    }
    
    function setupRollover(thisImage) {
    	thisImage.outImage = new Image();
    	thisImage.outImage.src = thisImage.src;
    	thisImage.onmouseout = rollOut;
    
    	thisImage.clickImage = new Image();
    	thisImage.clickImage.src = "images/" + thisImage.id + "_click.png";
    	thisImage.onclick = rollClick;	
    
    	thisImage.overImage = new Image();
    	thisImage.overImage.src = "images/" + thisImage.id + "_on.png";
    	thisImage.onmouseover = rollOver;
    		
    }
    
    function rollOver() {
    	this.src = this.overImage.src;
    }
    
    function rollOut() {
    	this.src = this.outImage.src;
    }
    
    function rollClick() {
    	this.src = this.clickImage.src;
    }
    
    
    function rollClick() {
    	if(lastClick){
    	lastClick.onmouseout = rollOut;
    	lastClick.src = this.outImage.src;
    	}	
    this.src = this.clickImage.src;
    this.onmouseout = rollClick;
    lastClick = this;
    }
    var lastClick = null;
    Any help would greatly be appreciated

  2. #2
    Join Date
    Feb 2012
    Location
    youTUBE
    Posts
    234
    You are confusing issues!
    Code:
     
    var rollClick=function (this) {
        if(lastClick){
        lastClick.onmouseout = 'rollOut(this)';
        lastClick.src = outImage;
        }
    var rollOver=function (this) {this.src = overImage;}
    var rollOut=function (this) {this.src = outImage;}
    Code:
     
    function setupRollover(thisImage) {
        thisImage.onmouseout = 'rollOut(this)';
        thisImage.onclick = 'rollClick(this)';    
        thisImage.onmouseover = 'rollOver(this)'; 
    }

  3. #3
    Join Date
    Mar 2012
    Posts
    2
    OK, That is why I am here. As I pointed out I am not knowledgeable in JavaScript.

    The last bit of code (first one you pointed out in your reply) was a fix I found to stop the original (off) image from appearing on roll out. I wanted the click state to stay put.

    It worked and fixed the problem. So I was unaware there was an error.

    If you have a any solutions for the issue, please let me know.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles