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. Advertisements

  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. Advertisements

  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. Advertisements

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:
    567
    Vijesh
    Nov 27, 2004
  2. Stan Goodman

    Even older fart, even newer newbie

    Stan Goodman, Jul 3, 2003, in forum: Java
    Replies:
    11
    Views:
    944
    Stan Goodman
    Jul 4, 2003
  3. Pavel
    Replies:
    1
    Views:
    6,212
    Pavel
    Nov 14, 2003
  4. Replies:
    2
    Views:
    3,082
    Toby Inkster
    Aug 15, 2004
  5. hell2heaven
    Replies:
    0
    Views:
    550
    hell2heaven
    Oct 26, 2008
  6. ~~~ .NET Ed ~~~

    How should control images should be handled?

    ~~~ .NET Ed ~~~, Oct 31, 2004, in forum: ASP .Net Building Controls
    Replies:
    1
    Views:
    477
    John Saunders
    Nov 3, 2004
  7. Ben Fidge
    Replies:
    0
    Views:
    248
    Ben Fidge
    Feb 10, 2004
  8. Arthur
    Replies:
    6
    Views:
    283
    Randy Webb
    Jun 17, 2007
Loading...