Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > how to change images based on action.Even clicking changed images should do respective actions?

Reply
Thread Tools

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

 
 
vj
Guest
Posts: n/a
 
      01-12-2007
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

 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      01-12-2007
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
 
Reply With Quote
 
 
 
 
vj
Guest
Posts: n/a
 
      01-12-2007

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 Removed)>
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


 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      01-12-2007
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Brit "Keystone cops" can't get their respective acts together RichA Digital Photography 11 12-24-2009 03:11 PM
Getting IP and the respective host name of the nodes in an interanetwork or a subnet? Vijesh ASP .Net 0 11-27-2004 02:35 PM
I want to be able to access the internet by opening my browser and not right clicking and then clicking connect. James Johnson Computer Support 1 05-15-2004 03:40 AM
Respective SOAP, WSDL and UDDI versions supported by .Net Framework Ben Fidge ASP .Net Web Services 0 02-10-2004 04:23 PM



Advertisments