Image Locks On Mouse Click

[Total: 0    Average: 0/5]

This example shows how to have one image when clicked lock its state.

Head Code:

<script language="JavaScript"> 

// image construct begin
var imgArray = new Array()
var imgNames = new Array()
function loadImgs() {
var i=0;
while (i<imgNames.length) {
imgArray[i] = new Image()
imgArray[i].src = imgNames[i]
i++
}
}
function setToLoadImg(imgName) {
var nextNum = imgNames.length
imgNames[nextNum] = imgName
return nextNum
}
function setImg(x,y) {
document.images[x].src = imgArray[y].src
}
// image contruct end
var img1 = setToLoadImg("http://www.js-examples.com/data/pic2.gif");
var img2 = setToLoadImg("http://www.js-examples.com/data/pic1.gif");
var img3 = setToLoadImg("http://www.js-examples.com/images/blue_ball0.gif");
var LOCKED = new Array();
    LOCKED["Image1"] = false;
    LOCKED["Image2"] = false;
function si(imgName,imgNum) {
if (LOCKED[imgName]) return;
//imgNames is set up by the images' construct
eval("document."+imgName+".src=imgNames["+imgNum+"]");
}

</script> 

Body Code:

<form method="post" action=""> 
<table summary="example" width="400"> 
<tr> 
<td><a href="#" onclick="si('Image1',img3);LOCKED['Image1']=true;"
onMouseOut="si('Image1',img2)"
onMouseOver="si('Image1',img1)"><img
name="Image1"
border="0" 
src="http://www.js-examples.com/data/pic1.gif" 
width="50" 
height="50" 
alt="pic 1"></a></td> 
<td><a href="#" onclick="si('Image2',img3);LOCKED['Image2']=true"
onMouseOut="si('Image2',img1)"
onMouseOver="si('Image2',img2)"><img 
name="Image2" 
border="0" 
src="http://www.js-examples.com/data/pic2.gif" 
width="50" 
height="50" 
alt="pic 2"></a></td> 
</tr>
</table> 
</form> 

<BR />
Note: The onload routine onload="loadImgs()" is not run here.
<BR /><a href="javascript:loadImgs()">click here to run loadImgs() now</a>

Times Viewed: 5

Leave a Reply

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