Four Images In One

[Total: 0    Average: 0/5]

This shows how to have one image replaced on mouseover, mouse click (down), mouse release (up), and mouse away.

Init Code:

marLeave();

Body Code:

<a href="javascript:marCLK('myimg')" 
   onclick="marCLK('myimg')" 
   onmouseover="marON('myimg');status='status1';return true;" 
   onmousedown="marDN('myimg');status='status2';return true;" 
   onmouseout="marOUT('myimg');status='status3';return true"><img 
   name="myimg"
   border="0" 
   alt="i have 4 states of images mouse(on,out,down,click)" 
   width="50" 
   height="50" 
   src="http://www.js-examples.com/js/pic1.gif"></a>
<script>
<!-- //
var marLOCKED = new Array(); // set to true when clicked so the mouse out wont work.
var NUM_IMAGES = 1;
if (document.images) {
  // if supported by the browser, this pre-loads the images so 
  // they are ready to be viewed upon demand.
  imgMouseOut = new Image();
  imgMouseOut.src = "http://www.js-examples.com/js/pic1.gif";
  imgMouseOn = new Image();
  imgMouseOn.src = "http://www.js-examples.com/js/pic2.gif";
  imgMouseClick = new Image();
  imgMouseClick.src = "http://www.js-examples.com/js/pic4.gif";
  imgMouseDown = new Image();
  imgMouseDown.src = "http://www.js-examples.com/js/pic3.gif"; //this can be different
}
function marCLK(_i) { 
document.images[_i].src=imgMouseClick.src;
marLOCKED[_i] = true;
}
function marOUT(_i) { 
if(marLOCKED[_i])return;
document.images[_i].src=imgMouseOut.src;   
}
function marON(_i)  { 
if(marLOCKED[_i])return;
document.images[_i].src=imgMouseOn.src;    
}
function marDN(_i)  { 
if(marLOCKED[_i])return;
document.images[_i].src=imgMouseDown.src;  
}
function marinit() {
for(var _i=0;_i<NUM_IMAGES;_i  )
marLOCKED[_i]=false;
//marOUT();
}
function marLeave() {
marinit();
}
// -->
</script>

Times Viewed: 3

Leave a Reply

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