SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict rabbitdog's Avatar
    Join Date
    Jul 2001
    Location
    So. Tenn.
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to swap images...

    I'm looking for some javascript that would swap images; but a little differently than your standard onmouseover.

    This is the deal:

    I want to be able to click on an image, have it swapped when I click on it, and stay swapped.

    If I click on a different image, I need the one I clicked on previously to change to the default, and the new one to swap.

    This is working in the context of a series of graphic links, the goal is to do a subtle "you are here".

    Any ideas on how to do this (if it is possible), or a tutorial on the topic?

    If my description isn't clear enough...I do have a url that may help illustrate.

    Thanks in advance.
    Mr Vector
    High quality, royalty free, vector graphics
    for t-shirt artists and graphic/web designers.

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup. Take your bog standard onMouseOver script, replace all the onMouseOver's with onMouseDown or onMouseUp (depending on whether you want an 'on release' effect or not) and rip the onMouseOut bits.

    G

  3. #3
    SitePoint Addict rabbitdog's Avatar
    Join Date
    Jul 2001
    Location
    So. Tenn.
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured that'd be an option, but how would you do the bit about "un"-mouseovering the one that's already got the new image when you click a new one?
    Mr Vector
    High quality, royalty free, vector graphics
    for t-shirt artists and graphic/web designers.

  4. #4
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahhhhhh ... I see.

    You'd need a function that you'd fire on every click that resets all of the other images to their original state.

    What if your onMouseDown action fires the function that resets all images and *THEN* changes the one you're on to it's 'over' state. That'd do it!

    Something like:

    Code:
    onMouseDown="resetImages(); imageSwap('thisImage.gif')"
    Edit:

    Haven't worked out what the functions would look like, but I'm sure they'd be simple enough to create.


    G
    Last edited by greg.harvey; Aug 14, 2002 at 08:40.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I happened to have used something a little similar.
    This is what I did, which can also be adapted to your case I think:
    Code:
    //preloading
    var initial_gif = new Image(); 	
        initial_gif.src = "the url to initial_gif";
    var gif_A = new Image();
        gif_A.src = "the url to gif_A";
    var gif_B = new Image();
        gif_B.src = "the url to gif_B";
    
    //name="initial_gif" is used in the img tag of the 'rollover link' in html
    
    //initialise rollover images
    var old_img = initial_gif.src;
    var new_img = gif_A.src;
    
    //onmouseover calls:
    function swap1(){
    document.images.initial_gif.src = new_img; 
    }
    
    //onmouseout calls:
    function swap2(){
    document.images.initial_gif.src = old_img; 
    }
    
    //So initially the rollover swaps between "initial_gif" and "gif_A"
    
    //onclick calls:
    function doSomething(){	
      old_img = gif_A.src;
      new_img = gif_B.src;
      //possibly rest of function
    }
    
    //From now on the rollover swaps between"gif_A" and "gif_B"
    After this it depends what you want to see happen when the user clicks the link for the second time;
    To revert to the initial situation for example, one could use a toggle:
    Code:
    var toggle=false;
    
    function doSomething(){
      toggle=!toggle;
        if(toggle){
        old_img = gif_A.src;
        new_img = gif_B.src;
        //possibly rest of function
        }
        if(!toggle){
        old_img = initial_gif.src;
        new_img = gif_A.src;
        //possibly rest of function
        }
      //possibly rest of function
    }
    Or another link could make changes to the variables old_img and new_img...

    This system worked for me though I suppose it might also be possible to do this in a more compact way...
    Btw, if anybody sees any errors in this, please point them out...
    Oh yeah, I didn't use if(document.images),
    is there any reason to use this test apart from testing for NS?


Bookmarks

Posting Permissions

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