Mouse behaviours

[bunglebrown]

Just trying to get some images reacting the way I want in dreamweaver but cant seem to hit it.

    <td height="50%"><a href="#" onmousedown="MM_swapImage('Image1','','phase3.jpg',1)" onmouseover="MM_swapImage('Image1','','Images/phase2.jpg',1)"><img src="Images/phase1.jpg" name="Image1" width="25" height="25" border="0" id="Image1" /></a></td>

The image is changing for the rollover to phase 2 = good. It is changing on the mousedown to phase 3 = great. But once the image has been clicked and is once again rolled over it goes back to phase 2 . . whereas I want it to stay as phase 3.

Also I have other images on the screen that will work in the same way and I want to make it so that only one of them can be pressed down at one time (phase 3), i.e. on clicking a different image to the one already selected it applies the behaviour (phase 3) to the newly selected image and resets the other (phase 1). I suspect this is quite simple but then everything is when you know how to do it. In faith and thankfulness.

 

[VPmase]

Add this code to the <a> tag:

onmouseout="MM_swapImage('Image1','','Images/phase1.jpg',1)"

 

[bunglebrown]

thanks for the response..

. . .that action does however disable the phase 3 (onmousedown) part when you move from that icon which is not what I want to do.

Id like rollovers which I have and once an image is clicked it for it to remain selected and only change if another image is selected - so only one can be selected at any one time.

thanks again\.

 

[scopey]

So you want the image to change to image2 when rolled over, but to image3 if clicked, and it not to change back to image2 if it is image3 on rollover?

If so, you want to run a function on mouse over that checks if the src of the image is image3, then it will do nothing... Else, the image will change to image2. I would suggest you put the onmouseover and onmousedown function in the img tag, and not the a tag. Makes it easier to JS for it.

Ie. In JS file:
function mouseover(elem){
if(this.src == 'Images/phase1.jpg') this.src = 'Images/phase2.jpg';
}

In img tag:
...onmouseover='mouseover(this)'...

 

[bunglebrown]

that is the type of solution I expected but it hasn't quite worked, although I feel we're close.

This is the JS:

function rollover(this)
{
if(this.src='Images/phase1.jpg') this.src='Images/phase2.jpg'
}

And this is how I've referenced the function:

     <td height="50%"><a href="#" onmousedown="displayad()" onmouseover='rollover()'> <img src="Images/phase1.jpg" name="Image1" width="25" height="25" border="0" id="Image1" /></a></td>

Any further pointers? ??