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

[vj]

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

[ASM]

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]

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 <[e-mail]>
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

[ASM]

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