Image click latches it and unlatches others

[Total: 0    Average: 0/5]

This shows how to latch the image to a clicked image so the mouse over will not work.

Head Code:

<SCRIPT LANGUAGE=JavaScript> 
<!-- 
// this preloads the images.
var _images = new Array();
    _images[0]=new Image();_images[0].src="http://www.js-examples.com/js/images/pic3.gif";
    _images[1]=new Image();_images[1].src="http://www.js-examples.com/js/images/pic1.gif";
    _images[2]=new Image();_images[2].src="http://www.js-examples.com/js/images/pic2.gif";

var _imageNames = new Array();
    _imageNames[0] = "Clark1";
_imageNames[1] = "Clark5";
var imgClicked = new Array(false,false);

// just some constants
var mOVER  = 1;
var mOUT   = 2;
var mCLICK = 3;

function swap(ROLL,img_name,img_src) { 
  if (ROLL == mOVER) {
    for (var _i=0;_i<_imageNames.length;_i++)
      if (imgClicked[_i] && _imageNames[_i]==img_name) return;
    document[img_name].src=(img_src + "2.gif");
  }
  
  if (ROLL == mOUT) {
    for (var _i=0;_i<_imageNames.length;_i++) {
      if (imgClicked[_i]) {
    if (_imageNames[_i]==img_name) {
      return;
    }
  }
}
    document[img_name].src=(img_src + "1.gif");
  } 
  
  if (ROLL == mCLICK) {
    for (var _i=0;_i<_imageNames.length;_i++) {
      if (_imageNames[_i] != img_name) {
    if (imgClicked[_i]) {
          imgClicked[_i]=false;
  document[_imageNames[_i]].src=(img_src + "1.gif");
}
     } else {
    imgClicked[_i] = true;
  }
    }
// uncomment this next line instead of the following line
    // which is only here for test purposes.
    //document[img_name].src=(img_src + "1.gif");
    document[img_name].src=_images[0].src; // test line
    
  } 
} 
//--> 
</SCRIPT> 

Body Code:

<a href="#" OnMouseOver="swap(mOVER,'Clark1','http://www.js-examples.com/js/images/pic')" 
            OnMouseOut="swap(mOUT,'Clark1','http://www.js-examples.com/js/images/pic')" 
onclick="swap(mCLICK,'Clark1','http://www.js-examples.com/js/imates/pic')"> 
<img src="http://www.js-examples.com/js/images/pic1.gif" name="Clark1" border="0"></a><br> 

<a href="#" OnMouseOver="swap(mOVER,'Clark5','http://www.js-examples.com/js/images/pic')" 
            OnMouseOut="swap(mOUT,'Clark5','http://www.js-examples.com/js/images/pic')" 
onclick="swap(mCLICK,'Clark5','http://www.js-examples.com/js/images/pic')"> 
<img src="http://www.js-examples.com/js/images/pic1.gif" name="Clark5" border="0"></a><br> 

Times Viewed: 4

Leave a Reply

Your email address will not be published. Required fields are marked *