View Full Version : HELP - swapping images using onClick and onMouseOver

05-08-2007, 12:53 AM
I am working on a Nav. menu, and I currently have the onMouseOver and onMouseOut set up to "highlight" the menu selection under the mouse as the mouse moves over them - a common technique.

Also, when a menu choice is clicked, I want to "permanently" change to the "highlighted" image of that menu choice, at least until another one is clicked. And any other menu item that was "highlighted" prior to the new choice, I want it to revert back to the original image.

The code I am using (below) for each of these applications works just fine when used by itself. But when trying to use both functions, the menu selection does not stay changed once clicked. I have a feeling that the "onClick" event is working, but as soon as the mouse is moved off of the clicked menu choice, the "onMouseOut" event is taking over and reverting back to the original image.

I know there are ways of doing this, but I am unfamiliar with any of them (besides the one I am using). What can I do to keep the "highlighted" image in place until another menu item is clicked?

Thanks to anyone who can help!!

Here is my code for the rollovers:

<script type="text/javascript">
function swapover(this1,that1){

and is called by onMouseOver="swapover('home','home_on.gif')", onMouseOut="swapover('home','home.gif')"

and here is the code for the onClick event (10 menu items)

<script type="text/javascript">
function swapimages(which1,what1,which2,what2,which3,what3,which4,what4,which5,what5,which6,what6,which7,what 7,which8,what8,which9,what9,which0,what0){

and the call for the "HOME" button: onClick="swapimages('home','home_on1.gif','about','about.gif','machines','machines.gif','designs','designs.gi f','supplies','supplies.gif','notions','notions.gif','fabrics','fabrics.gif','patterns','patterns.gi f','events','events.gif','contact','contact.gif')"

Like I said, each works fine when the other isn't being called. So what can I do?

Thanks again!!!

05-08-2007, 02:58 AM
well, the two functions willwork hand in hand as long as the onmouseover/out function looks to see if the background image is the original or not. basically if the background image is the image for the click event, then have the onmouseover/out function return true, and not do anything. else if the background image isnt the clicked background, swap the images.

05-08-2007, 03:56 AM
Thanks for the reply man. But could you help me a little more with the syntax for doing that? I know Java, so I understand what you are saying, but javascript's syntax is still a little greek to me. And there might be a little problem:

In my code, the original names are in the format "home.gif", "about.gif", etc. The overlay (rollover) images are names "home_on.gif", "about_on.gif", etc. So when I mouseOver HOME, the image becomes "home_on.gif". Then, if I click on HOME, would I have to have a 3rd image named "home_on1.gif" or something, that was just a copy of "home_on.gif"? Because if not, the onClick function would just be replacing "home_on.gif" with itself. And thus there would be no way to check if the image was clicked or just rolled over. Am I correct with this assumption, that I would need 3 images for each menu item?

Here's what I've come up with on my own (and I'm sure there will be some syntax errors) for what you described:

function swapover(this1,that1,other1){ //where "this1" is the name, "that1" is the source of the image i want to swap to, and "other1" would be the 3rd (onclick) image
if (document.getElementById("+this1+").src == "+other1+")
return true;

or similarly:

if (document.getElementById(''+this1+'').src != "+other1")
document.getElementById("+this1").src = "+that1+";


This makes the whole mouseover/out not funtion when i put it in my code, so I know it isn't right. So what would be the correct syntax?

Thanks again.

05-09-2007, 12:03 AM
yes 3 images would be what you need.
but you cannot just check for the images direct name, you would be checking the images path as well.

so say all your images are in the same place (which they should be)
http://www.yoursite.com/images/ (example not a link)
the above is the path to your images, so you will also need to check with that.
and heres a thrown together script for you:
name your images like so:

home_1.gif (normal)
home_2.gif (mouseover)
home_3.gif (onclick)


<img src="images/home_1.gif" id=home onmouseover=swapOverOut(this) onmouseout=swapOverOut(this) onclick=swapClick(this)>
<img src="images/about_1.gif" id=about onmouseover=swapOverOut(this) onmouseout=swapOverOut(this) onclick=swapClick(this)>

<script type=text/javascript>
var imgpath="http://www.yoursite.com/images/";
function swapOverOut(elem){
var imgsrc=elem.src;
//if the image is set to the onclick image, do nothing
return true;}
//if the image is the original image change to mouseover image
//if the image is the mouseover image, change to the original image

function swapClick(elem){
//change all images back to the original image even the image being clicked on
//insert the script here

elem.src=imgpath+elem.id+"_3.gif"; //sets the image clicked on to the 3rd image

its a roughly thrown together script, but should work