how to dynamically manipulate icons using javascript

[jayanthigk2004]

Folks,

I need a working code to do the following or something similar.

I have two icons in the screen. One to indicate right (a tick mark) and
one to indicate wrong (a cross).

If the user clicks on the first icon it should become tick and the
second one should become cross.

If the user clicks on the second icon then it should become tick and
the first one should become cross.

all this must happen in client side (no post back).

This is not my actual requirement but a small part of it. Once I have a
prototype code to do this I will build the rest from there.

Thanks

 

[ASM]

(e-mail address removed) a écrit :

Folks,

I need a working code to do the following or something similar.

I have two icons in the screen. One to indicate right (a tick mark) and
one to indicate wrong (a cross).

click what icon you want exchanges both images

<img src="ok.jpg" alt="" name="ok"
onclick="
var icon = this.src;
this.src = document.KO.src;
document.KO.src = icon;
">
<img src="X.jpg" alt="" name="KO"
onclick="
var icon = this.src;
this.src = document.ok.src;
document.ok.src = icon;
">


I would prefer :

one image (icons.jpg) with both icons

+-----+-----+
| | |
| O K | X |
| | |
+-----+-----+

CSS :
=====

..icon { cursor: pointer; }
..icon span { background: url(icons.jpg) no-repeat left center; }
..icon span.ko { background-position: right center; }

JS :
=====

function icon(what) {
what = what.getElementsByTagName('SPAN')[0];
what.className = what.className==''? 'ko' : '';
}

HTML :
======

<p class="icon" onclik="icon(this);">
<span>&nbsp; &nbsp;</span>Question 1</p>
<p class="icon" onclik="icon(this);">
<span>&nbsp; &nbsp;</span>Question 2</p>
<p class="icon" onclik="icon(this);">
<span>&nbsp; &nbsp;</span>Question 3</p>