Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HELP - swapping images using onClick and onMouseOver

    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){
    document.getElementById(''+this1+'').src=''+that1+'';
    }
    </script>


    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){
    document.getElementById(''+which1+'').src=''+what1+'';
    document.getElementById(''+which2+'').src=''+what2+'';
    document.getElementById(''+which3+'').src=''+what3+'';
    document.getElementById(''+which4+'').src=''+what4+'';
    document.getElementById(''+which5+'').src=''+what5+'';
    document.getElementById(''+which6+'').src=''+what6+'';
    document.getElementById(''+which7+'').src=''+what7+'';
    document.getElementById(''+which8+'').src=''+what8+'';
    document.getElementById(''+which9+'').src=''+what9+'';
    document.getElementById(''+which0+'').src=''+what0+'';
    }
    </script>


    and the call for the "HOME" button: onClick="swapimages('home','home_on1.gif','about','about.gif','machines','machines.gif','designs','d esigns.gif','supplies','supplies.gif','notions','notions.gif','fabrics','fabrics.gif','patterns','pa tterns.gif','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!!!

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    else
    document.getElementById(''+this1+'').src=''+that1+'';


    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.
    Last edited by Punkcrib; 05-08-2007 at 04:44 AM.

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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)

    about_1.gif
    about_2.gif
    about_3.gif

    Code:
    
    
     <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(imgsrc==imgpath+elem.id+"_3.gif"){
    //if the image is set to the onclick image, do nothing
    return true;}
    if(imgsrc==imgpath+elem.id+"_1.gif"){
    //if the image is the original image change to mouseover image
    elem.src=imgpath+elem.id+"_2.gif";
    }
    else{
    //if the image is the mouseover image, change to the original image
    elem.src=imgpath+elem.id+"_1.gif";}
    }
    
    
    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
    }
    </script>

    its a roughly thrown together script, but should work
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •