Clicking Image with mouseover disables mouse overs

[Total: 0    Average: 0/5]

This example shows how to have image roll-overs occur and have a click on those images

Head Code:

<script language="JavaScript"> 
onload="loadImgs()"
// 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/images/blue_ball0.gif");
var img2 = setToLoadImg("http://www.js-examples.com/images/red_ball0.gif");
var img3 = setToLoadImg("http://www.js-examples.com/images/green_ball0.gif");
var LOCKED = false;
function si(imgName,imgNum) {
if (LOCKED) return;
//imgNames is set up by the images' construct
eval("document."+imgName+".src=imgNames["+imgNum+"]");
}

</script>

Body Code:

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

Times Viewed: 0

Leave a Reply

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