Image RollOver With Click-Stick Option

[Total: 0    Average: 0/5]

This shows how to have an image act just like a roll over, but yet if the user clicks on the image, the “on” image will stick and not change back.

Body Code:

<script type=text/javascript>
// to set the total number of buttons involved 
// change the value of buttnum 
var buttnum=2; 

// initialize an array and loop through adding an element 
// for each button, initializing the element to false 
var buttons=new Array(); 
for(var i=1;i<=buttnum;i++){ 
buttons["button"+i]=false; 
} 

// function to check the status of the button when clicked and 
// change the image or exit, depending on boolian value 
function switch_img(_event,img_name,img_src){ 
if(buttons[img_name]==true) return; 
if(_event=="_click")buttons[img_name]=true; 
document[img_name].src=img_src; 
} 
</script> 


<A HREF="#" 
onmouseover="switch_img('_over','button1','http://www.js-examples.com/images/yellow_ball0.gif')"; 
onmouseout="switch_img('_out','button1','http://www.js-examples.com/images/green_ball0.gif')"; 
onclick="switch_img('_click','button1','http://www.js-examples.com/images/blue_ball0.gif')";> 
<IMG NAME="button1" SRC="http://www.js-examples.com/images/red_ball0.gif" ALT="Image1" border="0" align="right" width="85" height="22" hspace="0" vspace="0" units="pixels"></A>

Times Viewed: 1

Leave a Reply

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