how to change images based on action.Even clicking changed images should do respective actions?

Discussion in 'Javascript' started by vj, Jan 12, 2007.

  1. vj

    vj Guest

    how to change images based on action.
    Even clicking changed images should do respective actions.
    and while displaying only one image at a time sholud get displayed.
    I am using three images for a single column of a table in Jsp.

    Any clues.
    Any link for any good javascript html jsp site where i can find some
    good solution.

    here swaping hiding which will work well.

    no idea.

    please guide me.

    thanks
    vijendra
     
    vj, Jan 12, 2007
    #1
    1. Advertising

  2. vj

    ASM Guest

    Re: how to change images based on action.Even clicking changed imagesshould do respective actions?

    vj a écrit :
    > how to change images based on action.
    > Even clicking changed images should do respective actions.
    > and while displaying only one image at a time sholud get displayed.
    > I am using three images for a single column of a table in Jsp.
    >
    > Any clues.
    > Any link for any good javascript html jsp site where i can find some
    > good solution.



    Ideas to adapt to your table ...

    Create a transparent image sized to 1 pixel (ie : 'empty.gif')

    For each group of 3 images you create a new image with them
    (paste them one by the other horizontaly)

    Realize a styles sheet to fix your images :
    - 'empty.gif' is to display in place of your originals images
    - css to give them correct size(s)
    - css to put in background the corresponding group of 3
    - css (classes) to roll through the group :
    change position of background

    #myImages img { background: no-repeat center center }
    #myImages img.pos1 { position: left center }
    #myImages img.pos2 { position: right center }
    #img1 { width: 120px; heiht: 78px; background-image:url(imgs/i_01.jpg);}
    #img2 { width: 173px; heiht: 95px; background-image:url(imgs/i_02.jpg);}

    Make a JS function to modify image :

    function imager(id,clas) {
    if(typeof(clas)=='undefined') clas = '';
    document.getElementById(id).className=clas;
    return false;
    }

    <a href="#" onclick="imager('img1','pos1');">test 1</a>
    <a href="#" onclick="imager('img1','pos2');">test 2</a>
    <a href="#" onclick="imager('img1','');">test 3</a>
    <div id="myImages">
    <img id="img1" src="empty.gif" alt="">
    <img id="img2" src="empty.gif"
    onmouseover="this.className='pos1';"
    onmouseout="this.className='';"
    onclick="this.className='pos2';"
    alt="">
    </div>


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Jan 12, 2007
    #2
    1. Advertising

  3. vj

    vj Guest

    this suggestion looks good.
    But see my whole situation is this.

    In broad way if i say i have multiple situations in mutiple tables
    where i need such a logic to operate in for all tables.

    lets say in first time load of page by default one image will be
    displayed (one with sorted order for first column rest all non
    sorted)Now after every click to any image respective sort should get
    called.along with all images should get changed.Here with every
    function one/two images will get effect at least.
    As in first if i say sort by desc then this image will change rest all
    will remain in unsort form.
    when i move to other column and click on new image the previos will
    convert to unsort and new one will convert to sort by ascending. rest
    all will be in unsort form as it is.
    Now it seems like same logic is required with two three conditions.
    even for everyaction different parametrs has to be passed at differnt
    situations.

    i don't know how exactly this will fit but even though i will try
    making it.

    thanks
    vijendra


    On Jan 12, 4:06 pm, ASM <>
    wrote:
    > vj a écrit :
    >
    > > how to change images based on action.
    > > Even clicking changed images should do respective actions.
    > > and while displaying only one image at a time sholud get displayed.
    > > I am using three images for a single column of a table in Jsp.

    >
    > > Any clues.
    > > Any link for any good javascript html jsp site where i can find some
    > > good solution.Ideas to adapt to your table ...

    >
    > Create a transparent image sized to 1 pixel (ie : 'empty.gif')
    >
    > For each group of 3 images you create a new image with them
    > (paste them one by the other horizontaly)
    >
    > Realize a styles sheet to fix your images :
    > - 'empty.gif' is to display in place of your originals images
    > - css to give them correct size(s)
    > - css to put in background the corresponding group of 3
    > - css (classes) to roll through the group :
    > change position of background
    >
    > #myImages img { background: no-repeat center center }
    > #myImages img.pos1 { position: left center }
    > #myImages img.pos2 { position: right center }
    > #img1 { width: 120px; heiht: 78px; background-image:url(imgs/i_01.jpg);}
    > #img2 { width: 173px; heiht: 95px; background-image:url(imgs/i_02.jpg);}
    >
    > Make a JS function to modify image :
    >
    > function imager(id,clas) {
    > if(typeof(clas)=='undefined') clas = '';
    > document.getElementById(id).className=clas;
    > return false;
    >
    > }<a href="#" onclick="imager('img1','pos1');">test 1</a>
    > <a href="#" onclick="imager('img1','pos2');">test 2</a>
    > <a href="#" onclick="imager('img1','');">test 3</a>
    > <div id="myImages">
    > <img id="img1" src="empty.gif" alt="">
    > <img id="img2" src="empty.gif"
    > onmouseover="this.className='pos1';"
    > onmouseout="this.className='';"
    > onclick="this.className='pos2';"
    > alt="">
    > </div>
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date
     
    vj, Jan 12, 2007
    #3
  4. vj

    ASM Guest

    Re: how to change images based on action.Even clicking changed imagesshould do respective actions?

    vj a écrit :
    > this suggestion looks good.
    > But see my whole situation is this.


    what I understand of what you said (I'm lost in you images-columns)
    is you want to sort a table.
    http://kryogenix.org/code/browser/sorttable/

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
     
    ASM, Jan 12, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vijesh
    Replies:
    0
    Views:
    459
    Vijesh
    Nov 27, 2004
  2. Pavel
    Replies:
    1
    Views:
    6,023
    Pavel
    Nov 14, 2003
  3. Replies:
    2
    Views:
    2,935
    Toby Inkster
    Aug 15, 2004
  4. hell2heaven
    Replies:
    0
    Views:
    437
    hell2heaven
    Oct 26, 2008
  5. Ben Fidge
    Replies:
    0
    Views:
    148
    Ben Fidge
    Feb 10, 2004
Loading...

Share This Page