3 state rollover with onClick state staying active until another image is clicked

[leefentress]

So far I've got this working so that it has a rollover image, click image, and roll out image, but I don't want it to revert back to the original image when you roll out if the image has been clicked--I want it to stay on the click image until another button is clicked.

window.onload = rolloverInit;

function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].name == "Play") {
			setupRollover(document.images[i]);
		}
	}
}

function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = thisImage.src;
	thisImage.onmouseout = rollOut;

	thisImage.clickImage = new Image();
	thisImage.clickImage.src = "../../images/" + thisImage.id + "playbutton3.jpg";
	thisImage.onclick = rollClick;	

	thisImage.overImage = new Image();
	thisImage.overImage.src = "../../images/" + thisImage.id + "playbutton2.jpg";
	thisImage.onmouseover = rollOver;	
}

function rollOver() {
	this.src = this.overImage.src;
}

function rollOut() {
	if (this.
	this.src = this.outImage.src;
}

function rollClick() {
	this.src = this.clickImage.src;
}

[ZeroKilled]

function rollClick() {
	if(lastClick){
	lastClick.onmouseout = rollOut;
	lastClick.src = this.outImage.src;
	}	
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;

[leefentress]

Woo hoo, that worked perfectly! Thanks so much I really need to learn this stuff so bad

[leefentress]

I thought of something else... How would you make it so the button reverts back to the original roll out image after 30 seconds?

[ZeroKilled]

replace rollClick function with this modified rollClick:

function rollClick() {
if(lastClick) release();
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
if(stamp != null)clearTimeout(stamp);
stamp = setTimeout('release()', 2000);
}

function release(){
lastClick.onmouseout = rollOut;
lastClick.src = lastClick.outImage.src;
lastClick = null;
}
var lastClick = null;
var stamp;

[jannacs7]

hi guys,

what if i want the already clicked button to stay on the click image , until clicked again?When clicked again then it will go back to its normal state with the onmouseover and mouseout effect.

Thanku.

[jannacs7]

I think that it would be better if i show you my code. With the following code, mouseout,mouseover and onclick functions work just fine. On the other hand, what i want to achieve is whenever an img is clicked for the second time , to change back to its original state with rollover effects enabled.In other words, select and deselect.
Please bear in mind that i cannot alter any of the html markup, or change any image name.Only the javascript file.

    function findimg()
    {
     var imgs,i;
      
    // loop through all images and setup the rollover functions
     imgs=document.getElementById('myTable').getElementsByTagName("img");
     for(i=0;i<imgs.length;i++)
     {
       setupRollover(imgs[i]);

     }
    }
function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = "../../images/" + thisImage.id + "available.jpg//";
	thisImage.onmouseout = rollOut;

	thisImage.clickImage = new Image();
	thisImage.clickImage.src = "../../images/" + thisImage.id + "mine.jpg";
	thisImage.onclick = rollClick;	
    
	thisImage.overImage = new Image();
	thisImage.overImage.src = "../../images/" + thisImage.id + "mine.jpg";
	thisImage.onmouseover = rollOver;	
    }

function rollOver() {
	this.src = this.overImage.src;
    }

function rollOut() {
	this.src = this.outImage.src;
	
    }
function rollClick() {
this.src = this.clickImage.src;
this.onmouseout = rollClick;
    }

[Sterling Isfine]

Are all these controls supposed to be independent or a group, in which if one is clicked all others reset?

[jannacs7]

Are all these controls supposed to be independent or a group, in which if one is clicked all others reset?

sorry i m not sure if i completely understood your question. Try to think of it as an application for seat selection. i have a table with x seats (image=available).On mouseover the image turns to "mine", on mouseout back to available. When an image is clicked the img must stay to mine without response to any rollover effect.

On the other hand, the user must be able to select multiple seats(images) but also to be able to unselect seats. When unselecting seats, the image turns back to available image and starts to response to rollover effects.

I hope i understood your question correctly. thanks.

[Sterling Isfine]

i have a table with x seats (image=available).On mouseover the image turns to "mine", on mouseout back to available. When an image is clicked the img must stay to mine without response to any rollover effect.

On the other hand, the user must be able to select multiple seats(images) but also to be able to unselect seats. When unselecting seats, the image turns back to available image and starts to response to rollover effects.

So they're independent controls. I don't think the code presented is entirely suitable.
That functionality is quite simple but you'll need a way to read and post the selected states of all controls, and ideally a way to reset them all.

[jannacs7]

thanks for the response. i ll see what i can do based on what you told me and ill post if anything comes up.

[Rezadin]

I'm lost, but i would like the same fundtion on my site. But how do you set up the HTML for it?

[generiq]

I'm also looking to use this on my site, but I've already got a script in-place for the rollover images. Right now I have it setup to load another HTML page that has the proper image instead of using onclick. I'd rather not have t start from scratch, so I'm hoping there is a way I can modify when I already have to accommodate this functionality.

Just to clarify what I am trying to do:

• I want the image to change when you mouse over it, and change back to default when you mouse out
• I want the image to change when you click on it and stay on that new image when you mouse out
• I want the new image to remain until another image is clicked on the same page which operates the same way

This is being used as a menu bar, so when you click on the image i want it to change to a different image to indicate which page you are on. Then when you click a 2nd image to navigate to a different page, i want the first image to revert back to it's original image and the 2nd image to change to a new image.

Here's the javascript i have in the header:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

and here are the tags i'm using the "<a" tag for the mouseover, mouseout, and onclick:

onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/news-glow.png',1)"

[Shabado]

I've implemented this 3-state rollover with onclick staying active, for a series of tabs. Currently when the page loads all tabs are set to Out, but what I'd like is to set a certain tab as the default so when the page loads, that tab is already set to onclick active. Is this possible?

Any help would be greatly appreciated!