onClick to change class property 1

[leonnk]

Hi,

I am creating an image gallery and using javascript on my thumbnails to allow viewers to browse the gallery.

I have CSS classes for the thumbnails:

"Selected" and "NonSelected"

Nonselected have hover attributes and selected is enlarged.

How do I use javascript to change the class for the thumbnails (so that the thumbnail selected gets a "Selected" class and all others get a "NonSelected").

Thanks!

 

[feherke]

Hi

function ch(what)
{
  what.className=what.className.replace(/\b(?:Non)?Selected\b/,function(p){return p=='NonSelected'?'Selected':'NonSelected'})
}

<img src="1.jpg" alt="" class="NonSelected" onclick="ch(this)">
<img src="2.jpg" alt="" class="NonSelected onemoreclass" onclick="ch(this)">
<img src="3.jpg" alt="" class="otherclass NonSelected" onclick="ch(this)">

But if you have no plan to use multiple classes, it can be done simpler :

function ch(what)
{
  what.className=what.className=='Selected'?'NonSelected':'Selected'
}

<img src="1.jpg" alt="" class="NonSelected" onclick="ch(this)">
<img src="2.jpg" alt="" class="NonSelected" onclick="ch(this)">
<img src="3.jpg" alt="" class="NonSelected" onclick="ch(this)">

Feherke.

http://rootshell.be/~feherke/

 

[leonnk]

Thank you!

To take this further I trying to get the JavaScript to switch all other img classes to 'NonSelected', and I also don't want the img to be "de-selected" (i.e. switching back to 'NonSelected').

So to simplify:

OnClick on image 1 will change it's class to 'Selected' - if already 'Selected' then no change - and change img 2 and img 3 to 'NonSelected'.

Thanks again, I am trying to grasp JavaScript at the moment.

 

[leonnk]

Oh and I'm not using multiple classes.

 

[BillyRayPreachersSon]

Based on what feherke has given you, why not try it yourself and post your code here if you get stuck with it.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[feherke]

Hi

So you want kind of radio button group with images ?

Why not asked this from the beginning ?

Feherke.

http://rootshell.be/~feherke/

 

[leonnk]

Okay, sorry, I didn't initially regonise the similarity from my problem to radio buttons.

I have adapted the script very slightly like this:

<script type="text/javascript">
<!--
function ch(what)
{
what.className=what.className=='select'?'select':'select'
}
//-->
</script>

So now it only works one way. However, I am lost as to how to change all other image classes.

 

[feherke]

Hi

Some logic needs first.

In the first case the [tt]function[/tt] had to work with only one image at a time.

Not it has to handle one image in a way, and a set of other images in other way. It knows which is that one image - the clicked one. But has no idea which are the images of the set.

You have to either :
[ul]
[li]enumerate those images in an [tt]Array[/tt][/li]
[li]group all and only those images in a common container element[/li]
[li]mark those images with a specific [tt]class[/tt][/li]
[li]process all documents of the [tt]document[/tt] if they have either Selected or NonSelected [tt]class[/tt][/li]
[/ul]
Pick one.

Feherke.

http://rootshell.be/~feherke/

 

[leonnk]

Hi feherke,

Well, all images will be inside a div which will have it's own ID.

Or otherwise I am only using the 'Selected' and 'NonSelected' class for these images.
Not sure which one would be easier to use.

Thanks

 

[feherke]

Hi

At the 4[sup]th[/sup] point I thought to the possibility to have kind of legend or instruction, where the same [tt]class[/tt] will be applied on a non-functional sample [tt]img[/tt] too :

Gender
<img src="check.png" class="NonSelected" onclick="ch(this)"> Male
<img src="check.png" class="NonSelected" onclick="ch(this)"> Female
<img src="check.png" class="Selected" onclick="ch(this)"> Unknown
<hr>
Set your option to <img src="check.png" class="Selected">.

But if all [tt]img[/tt]s with those [tt]class[/tt]es are included, then I would do it like this :

[b]var[/b] imggrp=[]

[b]function[/b] ch(what)
{
  [b]if[/b] (!imggrp.length)
    [b]for[/b] ([b]var[/b] i=0,l=document.images.length;i<l;i++)
      [b]if[/b] (document.images[i].className==[i]'Selected'[/i] || document.images[i].className==[i]'NonSelected'[/i]) imggrp.push(document.images[i])

  [b]for[/b] ([b]var[/b] i=0,l=imggrp.length;i<l;i++)
    [b]if[/b] (imggrp[i].className==[i]'Selected'[/i]) imggrp[i].className=[i]'NonSelected'[/i]

  what.className=[i]'Selected'[/i]
}

The HTML is the same as in my first post.

Feherke.

http://rootshell.be/~feherke/